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

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

我基本上有以下示例代码，它是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>

{{product}}

上面的代码在两行上显示了两个选择下拉列表，我想实现的是，当用户从第1行的第一个选择下拉列表中选择产品时，我想在第2行的第二个选择下拉列表中反映相同的产品选择

我基本上希望第一个选择列表也控制第二个选择列表，即如果我选择了“Toaster”，那么这个“Toaster”也被设置在第2行选择列表上

这是我需要保留的设计。

您需要在

上使用
[（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>


没有一个
选择1
选择2
选择3
没有一个
选择1
选择2
选择3

这样，其中一个元素中的任何选择都将反映在另一个元素（）中。
您需要在
选择
元素上使用
[（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>


没有一个
选择1
选择2
选择3
没有一个
选择1
选择2
选择3

这样，其中一个元素中的任何选择都将反映在另一个元素（）中。
Hi，通过您的示例解决方案，我更新了上面的代码，因为我需要在ngModel设置中使用ngFor。我想要的是，每一对选择，我必须彼此不同。基本上，以你的例子来说，当我改变这个选项时，它会反映在第二个选项中，这是完美的。现在假设我有另一对选择，我现在想实现相同的选择，但我不想改变第一对的值，依此类推。希望这是有意义的。@tonyf，在这种情况下，您可以创建一个大小为currentHero.length/2的数组（因此它是Heros数量的一半），并且每个偶数元素（在%2==0中）都使用一个新的数组索引作为模型。我不确定是否完全理解您的注释，但我已经更新了该数组，使其具有不同的对。这就是你要找的吗？还有，只是好奇，你为什么会有这种情况？@bugs-会看一看。我有一个“新建”按钮，它根据一个唯一的名称编号创建两个选择列表，即pair-01-GROUPA和pair-01-GROUPB，如果他们再次按下“新建”按钮，这将创建另一对，但相反，将是pair-02-GROUPA和pair-02-GROUPB，因此当它们针对pair-01-GROUPA或pair-01-GROUPB进行选择时，选择值将相同。但在新的对pair-02-GROUPA和pair-02-GROUPB上，此选择将不同，并且不希望更改对pair-01-GROUPA和pair-01-GROUPB的选择值。希望这是有意义的。您好，有了您的示例解决方案，我更新了上面的代码，因为我需要在ngModel设置中使用ngFor。我想要的是，每一对选择，我必须彼此不同。基本上，以你的例子来说，当我改变这个选项时，它会反映在第二个选项中，这是完美的。现在假设我有另一对选择，我现在想实现相同的选择，但我不想改变第一对的值，依此类推。希望这是有意义的。@tonyf，在这种情况下，您可以创建一个大小为currentHero.length/2的数组（因此它是Heros数量的一半），并且每个偶数元素（在%2==0中）都使用一个新的数组索引作为模型。我不确定是否完全理解您的注释，但我已经更新了该数组，使其具有不同的对。这就是你要找的吗？还有，只是好奇，你为什么会有这种情况？@bugs-会看一看。我有一个“新建”按钮，它根据一个唯一的名称编号创建两个选择列表，即pair-01-GROUPA和pair-01-GROUPB，如果他们再次按下“新建”按钮，这将创建另一对，但相反，将是pair-02-GROUPA和pair-02-GROUPB，因此当它们针对pair-01-GROUPA或pair-01-GROUPB进行选择时，选择值将相同。但在新的对pair-02-GROUPA和pair-02-GROUPB上，此选择将不同，并且不希望更改对pair-01-GROUPA和pair-01-GROUPB的选择值。希望这是有意义的。