使用选择列表在 Angular 中进行两种方式绑定

Question

我希望在 Angular v5 中设置双向绑定，特别是使用 Angular Material 选择列表。

我基本上有以下示例代码，它是来自 HTML 表的 sn-p，并假设在屏幕上呈现时，只会出现两行，即：

<tr *ngFor="let currentHero of currentHeroes; let in = index-{{in}}">
  <td>
    <mat-form-field>
      <mat-select [(ngModel)]="currentHero.product" name="product">
        <mat-option *ngFor="let product of products" [value]="product">
          {{product}}
        </mat-option>
      </mat-select>
    </mat-form-field>                            
  </td>
</tr>

使用上面的代码，它在两行上显示两个选择下拉列表，我想要实现但不确定如何做的是，当用户从第一个选择下拉列表中选择产品时第 1 行，我希望相同的产品选择反映在第 2 行的第二个选择下拉列表中。

我基本上希望第一个选择列表也控制第二个选择列表，即如果我选择“烤面包机”，那么这个“烤面包机”也设置在第 2 行选择列表中。

这是我需要保持的设计。

Answer 1

您需要在select 元素上使用[(value)]="..." 才能进行双向绑定。

<mat-form-field>
  <mat-select [(value)]="selected">
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
  <mat-select [(value)]="selected">
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

这样，一个元素中的任何选择都将反映在另一个元素中 (demo)。