Question

我正在Angular 7中工作，我的要求之一是使用mat-icons创建mat-select。我面临的问题是我要么可以显示图标，要么可以显示选项标签，但不能同时显示两者。我需要做的是能够链接值，但是尝试时出现错误。

mat-select设置为

    <button mat-raised-button type="button" name="button" color="primary" class="roundedButton">
    <mat-select [(value)]="selected2">
      <mat-select-trigger><mat-icon>{{selected2}}</mat-icon>{{selected2}}</mat-select-trigger>
      <mat-option *ngFor="let food of foods" [value]="food.value">
        <mat-icon>{{food.icon}}</mat-icon>{{food.viewValue}}
      </mat-option>
    </mat-select>
    </button>
</mat-form-field>

我已将所选图标和标签放置在mat-select-trigger中，并将值设置为food.value。

用于选择的界面是

export interface Food {
  value: string;
  viewValue: string;
  icon: any;
}

和选择选项设置为

  foods: Food[] = [
    {value: 'steak-0', icon: 'add', viewValue: 'Steak'},
    {value: 'pizza-1', icon: 'lock', viewValue: 'Pizza'},
    {value: 'tacos-2', icon: 'search', viewValue: 'Tacos'}
  ];
    public selected2 = 'steak-0';

如果我将值更改为food.icon，则可以显示选择选项图标作为选择。如果我将值更改为food.viewValue，则会显示该选项的标签。

当用户做出选择时，如何获得两者？

我已经设置了Stackblitz来显示设置和实际运行情况。

提前谢谢！

Answer 1

您可以尝试以下代码：

<mat-select #select>
  <mat-select-trigger *ngIf="select.value"><mat-icon>{{select.value.icon}}</mat-icon>{{select.value.viewValue}}</mat-select-trigger>
  <mat-option *ngFor="let food of foods" [value]="food">
    <mat-icon>{{food.icon}}</mat-icon>{{food.viewValue}}
  </mat-option>
</mat-select>

Answer 2

与其将值设置为icon或viewValue，而是将其设置为整个对象。这样，所选值将包含整个对象中的数据。然后，您可以简单地使用所选对象中的属性来获得所需的内容。

<mat-form-field>
    <button mat-raised-button type="button" name="button" color="primary" class="roundedButton">
        <mat-select [(value)]="selected2" [compareWith]="compareFn">
            <mat-select-trigger><mat-icon class="selection-icon">{{selected2.icon}}</mat-icon><span>{{selected2.viewValue}}</span></mat-select-trigger>
            <mat-option *ngFor="let food of foods" [value]="food">
                <mat-icon>{{food.icon}}</mat-icon>{{food.viewValue}}
            </mat-option>
        </mat-select>
    </button>
</mat-form-field>

现在icon和viewValue都将显示在选择触发器中。您只需要图标的css，因为它不会与viewValue内联。

.selection-icon {
    position: relative;
    top: 6px;
    margin-right: 16px;
}

这里是工作中的example。

注意：要设置此选定对象的值，您可以传递原始数组本身中的对象（例如public selected2 = foods[0]），也可以使用{{ 1}}，以便compareWith能够跟踪值，因为我们的选项select是一个对象。这类似于value中的trackBy。基本上，可以传递原始数组的引用，以便ngFor可以跟踪它，也可以使用select告诉compareWith根据每个对象中的某个唯一值来跟踪数组中的对象。

在mat-select内显示一个mat-icon，并使用mat-select-trigger

2 个答案: