9

我有一个带有 ngfor 的 mat-accordion，当您单击面板时会显示一个表格。
除了 Mat 排序，一切都按预期工作，它只对第一个表进行排序。
我读到我需要将模板引用变量放在每个表中，但我怎样才能动态地做到这一点？或者有其他方法可以实现这一目标。
这是我的代码： 

  <mat-accordion style="width: 80%">
<mat-expansion-panel *ngFor="let customer of customers; let i = index" (opened)="openPanel(customer);">
  <mat-expansion-panel-header>
    <mat-panel-title>
      {{customer.name}}
    </mat-panel-title>
    <mat-panel-description>
      <span style="text-align:center">{{" Active Calls: " + customer.active}}</span>
      <span style="margin-left: 100px;">{{" Talking Calls: " + customer.talking}}</span>
    </mat-panel-description>
  </mat-expansion-panel-header>
  <table #HERE-I-NEED-TO-PUT-DYNMIC-ID mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <ng-container *ngFor="let column of tableColumns;" matColumnDef="{{column.field}}">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column.name}} </th>
      <td mat-cell *matCellDef="let element">
         <span *ngIf="column.field !== 'answered'"> {{element[column.field]}} </span>
         <span *ngIf="column.field === 'answered' && element[column.field] > 0">{{getTime(element[column.field] * 1000) | date: 'HH:mm:ss'}}</span>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</mat-expansion-panel>

谢谢。

4

2 回答 2

14

我通过使用方括号解决了这个问题。
代码如下。

    <ng-container *ngFor="let col of cols" [matColumnDef]="col">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ col }} </th>
        <td mat-cell *matCellDef="let element"> {{ element[col] }} </td>
    </ng-container>
于 2018-12-26T07:16:22.220 回答
0

我以这种方式解决了，这对我有用！带角度 7

--------- .ts file ---------



export interface PeriodicElement {
  position: number,
  profileImg: string;
  name: string;
}


// this is to get reference of sort table components
@ViewChildren(MatSort) sort = new QueryList<MatSort>();


ngAfterViewInit() {
  // this is to control all sort elements
  this.allDataSource.forEach((dataSource, index) => {
    dataSource.sort = this.sort.toArray()[index];
  });
}



  public configStudentsList: any[] = [
  {
    id: 1,
    studentAmount: '3',
    date: '03/04/2020 1:43:43 pm',
    dataSource: [
      { position: 1, profileImg: "https://bolavip.com/__export/1580908233923/sites/bolavip/img/2020/02/05/messi-barcelona_crop1580908232023.jpg_1902800913.jpg", name: 'Hydrogen' },
      { position: 2, profileImg: "https://bolavip.com/__export/1580908233923/sites/bolavip/img/2020/02/05/messi-barcelona_crop1580908232023.jpg_1902800913.jpg", name: 'Helium' },
      { position: 3, profileImg: "https://bolavip.com/__export/1580908233923/sites/bolavip/img/2020/02/05/messi-barcelona_crop1580908232023.jpg_1902800913.jpg", name: 'Lithium' }
    ]
  },
  {
    id: 2,
    studentAmount: '11',
    date: '30/05/2020 13:43:43 pm',
    dataSource: [
      { position: 1, profileImg: "https://thumbs.dreamstime.com/b/el-ejemplo-del-vector-de-disney-mickey-mouse-aisl%C3%B3-en-fondo-blanco-134953070.jpg", name: 'Pedro' },
      { position: 2, profileImg: "https://thumbs.dreamstime.com/b/el-ejemplo-del-vector-de-disney-mickey-mouse-aisl%C3%B3-en-fondo-blanco-134953070.jpg", name: 'ernesto' }
    ]
  }, {
    id: 3,
    studentAmount: '9',
    date: '12/04/2020 2:43:43 pm',
    dataSource: [
      { position: 2, profileImg: "https://www.lainformacion.com/files/article_default_content/uploads/2019/02/16/5c683ab9757a9.jpeg", name: 'lisa' },
      { position: 3, profileImg: "https://www.lainformacion.com/files/article_default_content/uploads/2019/02/16/5c683ab9757a9.jpeg", name: 'luis' },
      { position: 4, profileImg: "https://www.lainformacion.com/files/article_default_content/uploads/2019/02/16/5c683ab9757a9.jpeg", name: 'julian' }
    ]

  }
];

allDataSource: any = [];

ngOnInit(): void {

  //This is to manipulate all sort elements into (ngfor)
  let tableD: PeriodicElement[] = [];

  this.configStudentsList.forEach((myObject, index) => {
    let tableD: PeriodicElement[] = [];
    myObject.dataSource.forEach((source, index) => {
      tableD.splice(index, 0, source);
    });
  
    //for each table initialize a new MatTableDataSource object
    this.allDataSource.splice(index, 0, new MatTableDataSource(tableD));
  });

}
--------- html - adapt to your code but take at look of comments -----------

         <!--Manipulate tables inside ngFor loop -->
        <mat-accordion class="col-md-12 col-lg-12" *ngFor="let config of configStudentsList; let i = index">

            <mat-expansion-panel class="expansionCard" [disabled]="true" #mep="matExpansionPanel">
                <mat-expansion-panel-header class="expansionHeader">
                    <mat-panel-title> </mat-panel-title>
                    <mat-panel-description></mat-panel-description>
                </mat-expansion-panel-header>
                
                  <!-- this is the data source reference from .ts file-->
                <table mat-table [dataSource]=allDataSource[i] matSort #MatSorteds matSortStart="desc" class=" tableStudents">

                    <ng-container matColumnDef="name">
                      
                        <td mat-cell *matCellDef="let element">
                            <img class="profileTableImage" src="{{element.profileImg}} "
                                alt="https://corgascience.org/wp-content/uploads/2018/03/profil2.png" />
                            {{element.name | uppercase}}
                        </td>
                    </ng-container>

                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                    <tr class="trPadding" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                </table>
            </mat-expansion-panel>

        </mat-accordion>

于 2020-04-30T18:31:45.353 回答