angular - 如何在 Angular 中使用 mat-text-column

Question

你如何设置dataAccessor在 mat-text-column从HTML？该文档不包含任何示例。注意dataAccessor的签名是一个函数:

dataAccessor: (data: T, name: string) => string; 

Answer 1

“ _renderPrice ”在以下示例中用作 dataAccessor 函数。该函数接收一个由 dataSource 定义的类型的对象作为参数，并且必须返回一个字符串。它为表中的每一行调用一次。

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'app-orderpositions',
    template: `
  <table mat-table [dataSource]="positions">
    <mat-text-column name="price" justify="end" 
                     [headerText]="'BESTELLUNG.POSITIONEN.PREIS' | translate"
                     [dataAccessor]="_renderPrice">
    </mat-text-column>

    <tr mat-header-row *matHeaderRowDef="_displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: _displayedColumns;"></tr>
  </table>
  `
})
export class OrderpositionsComponent {

  @Input()
  positions: Orderposition[];

  readonly _displayedColumns: string[] = ['price'];

  _renderPrice(position: Orderposition): string {
    return `${position.price} EUR`;
  }
}

希望这可以帮助。