Angular 垫选项多个值

Question

假设我有一个带有成本和名称的接口项。

<mat-option *ngFor="let item of list" [value]="item.name">

这是在 mat-autocomplete 中，一旦用户选择了一个选项，我想同时显示 item.cost 和 item.name，但是 [value]="item.name" 只允许我显示一个。 如何连接这两个值？

Answer 1

值可以是 object

<mat-option *ngFor="let item of list" [value]="item">{{ item.name }}</mat-option>

Answer 2

在里面

<mat-option *ngFor="let item of list" [value]="item.name">

您可以访问 object（项目）的每个属性。

所以这：

<mat-option *ngFor="let item of list" [value]="item.name">{{item.name}}({{item.cost}})</mat-option>
//display-> Name (cost)

我建议在 [value] 属性中使用一些 Id，或者正如所说，整个 object，而不是 object 的名称，以防您有多个名称相同的项目。

此外，如果您不仅要在自动完成中显示所选值，您可以使用[displayWith]="displayFn"但您必须将 object 作为值。 [value]="item"

这是文档中的示例：

<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Assignee</mat-label>
    <input type="text" matInput [formControl]="myControl" 
[matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option.name}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

在 .ts 文件中，您必须拥有 displayFn function：

displayFn(user: User): string {
    return user && user.name ? user.name : '';
  }

在此示例中，de function 显示名称，如果未定义，则显示空字符串。

您可以在 displayFn function 上执行自定义逻辑，并确保返回要显示的字符串。 （displayFn function 得到的值）

所以在你的情况下，你必须通过 object：

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let item of list" [value]="option">
        {{option.name}}
      </mat-option>
    </mat-autocomplete>

在你的 .ts 文件中：

displayFn(item): string {
let displayedString = item.name + ' (' + item.cost+ ')'
    return displayedString;
  }

您的 output 将是：MyItemName (myItemCost)