Question

我有一个select组件，它包含一个表中的列数组。如何使它直观地显示其他列名，但不更改COLS变量中的原始列名？也就是说，我设置了列NAME的名称，并且需要将其显示为Full name。

const COLS = ["NAME", "LOGIN", "EMAIL", "ORG","DOLG"];

html：

<mat-form-field class="full-width">
    <mat-label>Customize Columns</mat-label>
    <mat-select [(ngModel)]="displayedColumns" multiple>
        <mat-option *ngFor="let row of allCols" [value]="row">{{ row }}</mat-option>
    </mat-select>
</mat-form-field>

Answer 1

您可以将常量定义为包含另一个名为 displayName 的键的对象，然后将该字段用作下拉值：

COLS = [ {value : "NAME", displayName: 'My display name'}];

，现在使用：

<mat-select [(ngModel)]="displayedColumns" multiple>
    <mat-option *ngFor="let row of COLS" [value]="row.value">
       {{ row.displayName }}
    </mat-option>
</mat-select>

如何在“选择”组件中显示其他名称？

1 个答案: