[英]Angular two way binding in ngFor
In Anguar 6, I have an ngFor which includes a select field. 在Anguar 6中,我有一个ngFor,其中包括一个选择字段。 The selected-value of this field should be bound to the Category Property of SeatBookingModel that i use in ngFor.
该字段的selected-value应该绑定到我在ngFor中使用的SeatBookingModel的Category属性。 As this is of type CategoryModel i could be able to display the .Price Property of the CategoryModel.
由于这是CategoryModel类型,因此我可以显示CategoryModel的.Price属性。
What am I doing wrong here? 我在这里做错了什么? The value for Category is not beeing set.
未设置类别的值。 Template:
模板:
<form>
<table class="table">
<tbody *ngFor="let bk of seatsReserved; let in=index">
<tr>
<td>
<span>{{ bk.SeatNumber }} </span>
</td>
<td>
<select class="form-control" name="ddlCategory_{{in}}">
<option *ngFor="let cat of getCategories(bk.SeatNumber)" [(ngValue)]="bk.Category" >{{cat.Name}}</option>
</select>
</td>
<td>
<span>{{ bk.Category.Price }}</span>
</td>
</tr>
</tbody>
</table>
Parts of Controller: 控制器部分:
export class SeatPlanComponent implements OnInit {
constructor(private route: ActivatedRoute, private dataService: DataService) {
}
seatsAlreadyTaken: Array<String>;
seatsReserved: Array<SeatBookingModel>;
getCategories(seatNr: String) {
let mock1 = new CategoryModel();
mock1.Id = 1;
mock1.Name = "Erwachsen";
mock1.Price = 27.00;
let mock2 = new CategoryModel();
mock2.Id = 2;
mock2.Name = "Student";
mock2.Price = 22.00;
return [mock1, mock2];
}
SeatBookingModel: SeatBookingModel:
export class SeatBookingModel {
SeatNumber : String;
Category: CategoryModel;
}
CategoryModel: CategoryModel:
export class CategoryModel {
Id : Number;
Name: String;
Price: Number;
}
ngValue
directive directive should be used as attribute binding
, its not two way bind able directive. ngValue
指令伪指令应该用作attribute binding
,它不是两种可绑定的指令。
[(ngValue)]="bk.Category"
should be 应该
[ngValue]="bk.Category"
<select [(ngModel)]="selectedOption">
<option *ngFor="let bk of selectOptions" [ngValue]="bk.Category.Name">
{{bk.Category.Name}}
</option>
</select>
{{ "selectedOption: " + selectedOption }}
ts code: ts代码:
// the option you selected; this is the model you bind to the select element.
// this also will hold the selected option/value when you change the select
public selectOptions:SeatBookingModel[] = [
{ SeatNumber : 'test1' , Category:{
Id : 44,
Name: 'test',
Price: 4,
}
}
];
public selectedOption = "test";
Ngvalue不支持双向绑定,您可以使用(onChange)= yourChangeFunction()来获取/更新您的值。
We can't bind ngValue
directive as two way. 我们不能以两种方式绑定
ngValue
指令。
Here, you are making it 2-way like [()]
(Banana in the box), this syntax binds the value two-way. 在这里,您使它像
[()]
一样为2路(在方框中为香蕉),此语法将值绑定为2路。 For directives you should do one-way []
(Only Box). 对于指令,您应该执行单向
[]
(仅Box)。
So your statement [(ngValue)]="bk.Category"
should be [ngValue]="bk.Category"
因此,您的语句
[(ngValue)]="bk.Category"
应该为[ngValue]="bk.Category"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.