Двусторонняя привязка в Angular с использованием списка выбора
Я хочу настроить двустороннюю привязку в 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.
Это дизайн, который мне нужно придерживаться.
Ответы 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>
Таким образом, любой выбор в одном из элементов будет отражен в другом (демонстрация).
@tonyf, в этом случае вы можете создать массив размером currentHero.length / 2 (так что это половина количества героев) и каждый четный элемент (в% 2 === 0), новый индекс массива используется как модель
Не уверен, что я полностью понял ваш комментарий, но я обновил демонстрация, чтобы иметь разные пары. Это то, что вы ищете?
Кроме того, просто любопытно, почему у вас такая ситуация?
@bugs - посмотрю. У меня есть кнопка «Создать», которая создает два списка выбора по уникальному номеру имени, то есть пара-01-GROUPA и пара-01-GROUPB, и если они снова нажимают кнопку «Создать», затем будет создана другая пара, но вместо этого будет pair-02-GROUPA и pair-02-GROUPB, поэтому, когда они сделают выбор против pair-01-GROUPA или pair-01-GROUPB, значение выбора будет таким же. Но в новой паре, пара-02-GROUPA и пара-02-GROUPB, этот выбор будет другим, и он не хочет, чтобы он изменял значения выбора для пары-01-GROUPA и пары-01-GROUPB. Надеюсь, это имеет смысл.
Привет, с вашим примером решения, я обновил свой код выше, так как мне нужно использовать ngFor с настройкой ngModel. Я бы хотел, чтобы каждая пара выбранных мной вещей отличалась друг от друга. В основном, используя ваш пример, когда я меняю вариант, один, он отражается во втором, что идеально. Теперь предположим, что у меня есть еще одна пара выборок, теперь я хочу добиться того же выбора, но я не хочу, чтобы она изменяла значения первой пары и так далее. Надеюсь, это имеет смысл.