Question

我正在尝试自定义具有多个选择的垫选触发标签。

这不是我的代码。

实际代码如下：

true

过滤器是一个看起来像这样的对象：

<mat-form-field *ngIf="filter.type === 'dropdown' && filter.multiple">
  <mat-select (selectionChange)="filterChanged(filter, $event)" [(value)]="filter.currentValue" [placeholder]="filter.name | translate" multiple>
    <mat-option *ngFor="let item of filter.items" [value]="item.key">{{item.value | translate}}
    </mat-option>
  </mat-select>
</mat-form-field>

项目看起来像：

export interface TableFilterDef {
  id: string;
  httpId: string;
  type: FilterType;
  name: string;
  currentValue: string[]; => an array of strings containing the selected keys
  class?: string;
  items?: KeyValue[]; => an array of objects (key/value) containing all the possible values
  dialogComponent?: any;
  reset?: Function;
  multiple?: boolean;
}

为演示起见，我在下拉列表中选择以下条目：E（错误）和W（警告）

首先，当我不使用标签mat-select-trigger时，会得到以下标签：

错误，警告

现在，当我使用以下标签mat-select-trigger时：

export const logLevels: KeyValue[] = [
  {key: 'E', value: 'Errors'},
  {key: 'W', value: 'Warning'},
  {key: 'I', value: 'Info'},
  {key: 'D', value: 'Debug'}
];

我得到标签：

E（+1其他）

因此系统显示键，但我想像这样显示值：

错误（其他+1个错误）

有什么想法吗？

谢谢。

Answer 1

它显示您的key属性，因为这是您绑定到mat-option中的值（[value]="item.key"）：

<mat-option *ngFor="let item of filter.items" [value]="item.key">{{item.value | translate}}
</mat-option>

您的currentValue数组将保存值['E', 'W']。要解决您的问题，您可以简单地绑定value属性而不是key，也可以绑定完整的对象，例如[value]="item"。如果绑定完整的对象，则需要调整TableFilterDef，以使currentValue的类型为KeyValue[]。您的触发器将如下所示：

<mat-select-trigger>
  {{filter.currentValue ? filter.currentValue[0].value : ''}}
  <span *ngIf="filter.currentValue?.length > 1">
    (+{{filter.currentValue.length - 1}} {{filter.currentValue?.length === 2 ? 'other' : 'others'}})
  </span>
</mat-select-trigger>

有多个选择的Angular Material Mat-select：显示所选值时出现问题

1 个答案: