Question

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

我基本上有以下示例代码，它是HTML表格的一个片段，并假设在屏幕上呈现时，只会出现两行，即：

<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行的第二个选择下拉列表中反映相同的产品选择。

我基本上希望第一个选择列表也控制第二个选择列表，即如果我选择＆＃34; Toaster＆＃34;，那么这个＆＃34; Toaster＆＃34;也被设置在第2行选择列表中。

这是我需要保持的设计。

Answer 1

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

<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）。

使用选择列表以角度进行双向绑定

1 个答案: