Angular 垫输入绑定 [值] 到 [(ngModel)]
Angular mat-input bind [value] to [(ngModel)]
我有这个table:
<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
}
]
table 的每一行代表这个数组的一个对象。在每一行中都有一个 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
中打印 属性(即每一行)来检查这一点。
有没有办法实现这种绑定?
您需要将 ngModel 放在 select 而不是选项上。 "changes" 是你的 select 并且每次你选择一个选项而不是选项本身时都会被设置。看这个例子:
https://stackblitz.com/angular/vkkalkxbmrok?file=app%2Fselect-form-example.ts
编辑:好的,我知道你想在这里做什么。您想要在每个处方中设置 idObject。在 select 上绑定 ngModel 将从 selectedObjects 复制整个 selected 对象,而不仅仅是 ID:
{"id":2, "description": "Desc2"}
我不确定您是否可以指定我只想要那个 select 的一个子对象,但这是您可以使用的完美案例:
(selectionChange)="setPrescriptionId($event, prescription)"
每次 selection 改变时都会调用此方法。
public setPrescriptionId(event: {id:string, description: string}, prescription: IYourPrescriptionInterface) {
prescription.idObject = event.id;
}
我有这个table:
<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
}
]
table 的每一行代表这个数组的一个对象。在每一行中都有一个 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
中打印 属性(即每一行)来检查这一点。
有没有办法实现这种绑定?
您需要将 ngModel 放在 select 而不是选项上。 "changes" 是你的 select 并且每次你选择一个选项而不是选项本身时都会被设置。看这个例子: https://stackblitz.com/angular/vkkalkxbmrok?file=app%2Fselect-form-example.ts
编辑:好的,我知道你想在这里做什么。您想要在每个处方中设置 idObject。在 select 上绑定 ngModel 将从 selectedObjects 复制整个 selected 对象,而不仅仅是 ID:
{"id":2, "description": "Desc2"}
我不确定您是否可以指定我只想要那个 select 的一个子对象,但这是您可以使用的完美案例:
(selectionChange)="setPrescriptionId($event, prescription)"
每次 selection 改变时都会调用此方法。
public setPrescriptionId(event: {id:string, description: string}, prescription: IYourPrescriptionInterface) {
prescription.idObject = event.id;
}