Двухстороннее связывание в Angular с использованием списка выбора

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.

Я хочу, чтобы первый список выбора также контролировал второй список выбора, т. Е. Если я выбрал «Тостер», то этот «Тостер» также был установлен в списке выбора 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 ).