Angular material 引用其中一列中的对象

Question

我正在使用 angular material 创建一个垫子-table。数据部分看起来像

 async ngOnInit() {
        const cardRsp:any = await this.dataSvc.fetchQueuedCards()        
        CARD_DATA = []
        for(let cRow of cardRsp){
        // console.log("::::adding:" + cRow._company)
          let c = new Card(cRow.key, cRow._frontImageUrl)

          CARD_DATA.push(c)

    }

    this.dataSource = new MatTableDataSource<Card>(CARD_DATA);
    this.changeDetectorRefs.detectChanges();

    this.dataSource.paginator = this.paginator;

  }

html看起来像

 <table mat-table [dataSource]="dataSource">          
                <!-- Date Column -->
             <ng-container matColumnDef="date">
                <th mat-header-cell *matHeaderCellDef  class="tbl-th"> Date </th>
                <td mat-cell *matCellDef="let element"> {{core.pretifyDate(element.date)}} </td>
              </ng-container>

                <!-- Process Column -->
             <ng-container matColumnDef="process">
                <th mat-header-cell *matHeaderCellDef  class="tbl-th"> Process </th>
                <td mat-cell *matCellDef="let element"> <button mat-button color="primary" (click)="processCard(row)"><mat-icon >edit</mat-icon></button> </td>
              </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"
                (click)="selection.toggle(row)">
            </tr>
          </table>

在上面的过程列中，我想在 processCard() 方法中传递整个对象。传递行不起作用。我应该在这里传递什么？

Answer 1

您尝试访问一个名为 row 的变量，该变量不存在。将 row 更改为 element，因为此时此变量包含您的整个对象，您的问题应该已解决。

<ng-container matColumnDef="process">
    <th mat-header-cell *matHeaderCellDef  class="tbl-th"> Process </th>
    <td mat-cell *matCellDef="let element"> <button mat-button color="primary" (click)="processCard(element)"><mat-icon >edit</mat-icon></button> </td>  // <-- change row to element here
</ng-container>

Angular material 引用其中一列中的对象

Angular material referring object in one of the column

angular-material

angular

angular-cdk

mat-table