角度材质表排序箭头不显示

Question

Angular17 的材质表排序箭头未显示，我正在使用 multiTemplateDataRows。谁能指出我哪里做错了。我正在寻找在实现排序功能之前显示的箭头。我正在从后端服务器获取数据并显示在表中。如果您需要打字稿文件中的模式代码，请告诉我。

<table mat-table [dataSource]="dataSource"  matSort multiTemplateDataRows                       class="mat-elevation-z8">
                     @for (column of columnsToDisplay; track column) {
                         <ng-container matColumnDef="{{column}}">
                             <th mat-header-cell *matHeaderCellDef mat-sort-header>

                                @if(column=='Sta'){
                                    DEP
                                }@if(column=='event'){
                                    EVENT
                                }                                    
                                @if(column=='srcTimestamp'){
                                    GENERATED TIME
                                }
                                @if(column=='insTimestamp'){
                                    RECORDED TIME
                                }
                                 
                                </th>
                             <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
                         </ng-container>
                     }
               <ng-container matColumnDef="expand">
                 <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
                 <td mat-cell *matCellDef="let element">
                   <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
                     @if (expandedElement === element) {
                       <mat-icon>keyboard_arrow_up</mat-icon>
                     } @else {
                       <mat-icon>keyboard_arrow_down</mat-icon>
                     }
                   </button>
                 </td>
               </ng-container>
             
               <ng-container matColumnDef="expandedDetail">
                 <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
                   <div class="example-element-detail"
                        [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
                     
                     <div class="example-element-description">
                         
                     <textarea readonly matInput style="height: 200px; width:750px;overflow-y: auto;font-family: 'Bradley Hand', cursive;background-color: beige;">
                         
                         {{element.avroMsg |json}}
                         
                     </textarea>                         
         
                     </div>
                     <div>
                        <button mat-button mat-raised-button [cdkCopyToClipboard]="element.avroMsg |json">Copy</button>
                     </div>
                     
                   </div>
                 </td>
               </ng-container>
             
               <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand;sticky: true"></tr>
               <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;let index = dataIndex;"
                   [ngClass]="{alternate: index % 2 == 0 }"
                   class="example-element-row"
                   [class.example-expanded-row]="expandedElement === element"
                   (click)="expandedElement = expandedElement === element ? null : element">
               </tr>
               <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
             </table>

Answer 1

我发现问题，必须在 .ts 文件中导入 MatSortModule