Angular mat-input связывает [значение] с [(ngModel)]
У меня есть эта таблица:
<table class = "mat-elevation-z8">
<tr *ngFor = "let prescription of prescriptions" class = "mat-row">
<td>
<mat-form-field class = "">
<input [value] = "prescription.description" matInput placeholder = "Description">
</mat-form-field>
</td>
<td>
<mat-form-field class = "">
<mat-select>
<mat-option *ngFor = "let object of selectedObjects" [value] = "object.id" [(ngModel)] = "prescription.idObject">
{{object.description}}
</mat-option>
</mat-select>
</mat-form-field>
</td>
<td>
<button mat-button class = "delete" (click) = "check(prescription)">delete</button>
</td>
</tr>
</table>
где мои рецепты массива имеют эту структуру:
prescriptions = [
{
id: 1,
description: "Prescrizione 1",
date1: new Date(),
date2: new Date(),
idObject: 0
},
{
id: 2,
description: "Prescrizione 2",
date1: new Date(),
date2: new Date(),
idObject: 0
}
]
Каждая строка таблицы представляет объект этого массива. В каждой строке есть элемент mat-select, который берет свои параметры из этого массива selectedObjects:
"selectedObjects": [
{
"id":1, "description": "Desc1"
},
{
"id":2, "description": "Desc2"
},
{
"id":3, "descrizione": "Desc3"
}
Чего я хочу добиться, так это привязать значение выбранного параметра, то есть object.id к свойству idObject элемента строки. Итак, я использовал [value] = "object.id" [(ngModel)] = "prescription.idObject", но это не работает, так как свойство остается равным 0 для всех строк. Я проверил это, напечатав свойство в методе check (то есть для каждой строки).
Есть ли способ реализовать такую привязку?
Ответы 1
Вам нужно поставить ngModel на выбор, а не на опцию. Это ваш выбор, который «меняется» и устанавливается каждый раз, когда вы выбираете опцию, а не саму опцию. Посмотрите на этот пример: https://stackblitz.com/angular/vkkalkxbmrok?file=app%2Fselect-form-example.ts
Обновлено: хорошо, я понял, что вы пытаетесь сделать здесь. Вы хотите установить idObject внутри каждого предписания. Привязка ngModel к выбору скопирует весь выбранный объект из selectedObjects, а не только идентификатор:
{"id":2, "description": "Desc2"}
Я не уверен, что вы можете указать, что мне просто нужен подобъект этого выбора, но это идеальный случай, когда вы можете использовать:
(selectionChange) = "setPrescriptionId($event, prescription)"
Angular 6 Метод изменения выбора материала удален.
Это будет вызываться каждый раз, когда ваш выбор изменяется.
public setPrescriptionId(event: {id:string, description: string}, prescription: IYourPrescriptionInterface) {
prescription.idObject = event.id;
}