Question

所以我使用Angular Material Table并制作了一个通用组件，我应该能够将'settings'数组传递给一组数据，组件应该能够相应地显示数据。

问题是我这样做的方式，我无法弄清楚如何检查对象本身是否为NULL。

所以我在传递'settings'数组时使用的结构如下：

  communicationColumns = [
    { columnDef: 'Icon', header: 'Due Date', cell: (row: CommunicationClaimantLinkDto) => `${row.CommunicationItemInformation.FileType.IconUrl}`, type: 'img' },
    { columnDef: 'Description', header: 'Description', cell: (row: CommunicationClaimantLinkDto) => `${row.CommunicationItemInformation.Description}`, type: 'text' },
    { columnDef: 'Name', header: 'Name', cell: (row: CommunicationClaimantLinkDto) => `${row.CommunicationItemInformation.IssuedBy.Name}`, type: 'text' }
  ];

从数组的最后一项可以看出，cell属性绑定到row.CommunicationItemInformation.IssuedBy.Name。问题是，当IssuedBy对象为NULL时，应用程序会中断。

表组件如下所示

<mat-table #table [dataSource]="dataSource">
  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
    <mat-header-cell *matHeaderCellDef>{{column.header}}</mat-header-cell>
    <mat-cell *matCellDef="let row">
      <span *ngIf="column.type === 'text'">{{column.cell(row)}}</span>
      <img *ngIf="column.type === 'img'" src="../../../../assets/icons/{{column.cell(row)}}" />
      <mat-chip-list *ngIf="column.type === 'tag'">
        <mat-chip [style.background]="row.Action.ActionTag[0].Tag.Colour.Value">{{row.Action.ActionTag[0].Tag.Value}}</mat-chip>
      </mat-chip-list>
    </mat-cell>
  </ng-container>
  <mat-header-row [style.display]="hideHeader ? 'none' : 'visible'" *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="rowClick.emit(row)"></mat-row>
</mat-table>
<mat-paginator *ngIf="itemsPerPage > 0" #paginator [pageSize]="itemsPerPage"> </mat-paginator>

Answer 1

在我看来，您想要显示任何表，使用您自己的数据结构来定义内容。问题似乎是cell属性，因为它可能在链中的某个位置为null。我已经做了一个例子，您仍然可以动态创建内容，但使用不同的方法。我为communcationColumns中的每个对象添加了一个新属性，用键路径替换了单元格：像这样：

communicationColumns = [
    { columnDef: 'Icon', header: 'Due Date', cell:['CommunicationItemInformation','FileType','IconUrl'], type: 'img' }
  ];

然后我会创建一个管道，将其中一个对象作为参数，并使用keys-array来获取给定键链的值。

@Pipe({
  name: 'myKeys'
})
export class KeysPipe implements PipeTransform {
  constructor() {
  }

  transform = (value: any, args?: any): any => {
    let tmpVal = value;
    if(tmpVal && args && Array.isArray(args) && args.length > 0){
      args.forEach( arg =>{
        if(tmpVal && tmpVal.hasOwnProperty(arg)){
          tmpVal = tmpVal[arg];
        }else{
          return "";
        }
      });
      return tmpVal;
    }
    return "";
  }
}

然后在您的模板中，您可以使用{{column.cell(row)}}

更改所有{{row|myKeys:row.cell}}

<mat-table #table [dataSource]="dataSource">
  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
    <mat-header-cell *matHeaderCellDef>{{column.header}}</mat-header-cell>
    <mat-cell *matCellDef="let row">
      <span *ngIf="column.type === 'text'">{{row|myKeys:row.cell}}</span>
      <img *ngIf="column.type === 'img'" src="../../../../assets/icons/{{row|myKeys:row.cell}}" />
      <mat-chip-list *ngIf="column.type === 'tag'">
        <mat-chip [style.background]="row.Action.ActionTag[0].Tag.Colour.Value">{{row.Action.ActionTag[0].Tag.Value}}</mat-chip>
      </mat-chip-list>
    </mat-cell>
  </ng-container>
  <mat-header-row [style.display]="hideHeader ? 'none' : 'visible'" *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="rowClick.emit(row)"></mat-row>
</mat-table>
<mat-paginator *ngIf="itemsPerPage > 0" #paginator [pageSize]="itemsPerPage"> </mat-paginator>

以下是simple Stackblitz说明如何使用它（与其他数据一起使用）。我不知道这是不是最好的做法＆＃34;这样做的方式，但我认为它适用于你的情况。

绑定到表组件时如何检查嵌套的null对象

1 个答案: