我使用HTTP请求来获取ionViewDidLoad()中的项目列表。我想显示带有加号和减号的项目列表,中间有一个输入框。每个项目都由“ id”和“ name”字段组成。我想使用每个项目的“ id”来区分提交时间。如何在输入标签中声明 formControlName 作为每个项目的ID?
<ion-item *ngFor="let item of items">
<ion-label fixed>{{item.name}}</ion-label>
<ion-icon item-end name="remove-circle" (click)="decreaseAmount(item.id)"></ion-icon>
<input item-end placeholder="Quantity" type="tel" formControlName={{item.id}}
(click)="changeAmount(item.id, 'item.id')" ion-text text-center [style.width]="'50px'"/>
<ion-icon item-end name="add-circle" (click)="increaseAmount(item.id)"></ion-icon>
</ion-item>
内部TS文件
this.itemForm = this._formBuilder.group({
items:this.getItems()
});
this.getItems()将返回
[[[id:1,name:Apple],[id:2,name:Mango] ...]
更新:
我设法使用item.id作为输入的名称,但是如何在this._formBuilder.group中声明每个项目的ID?当我手动添加时,它可以工作,但是在实际应用中,我将不知道会有多少个项目。
this.itemForm = this._formBuilder.group({
items:this.getItems(),
1:[0, Validators.required],
2:[0, Validators.required],
3:[0, Validators.required],
4:[0, Validators.required],
5:[0, Validators.required],
6:[0, Validators.required],
7:[0, Validators.required],
8:[0, Validators.required],
});