如何在Ionic中使用ngModel更新动态范围？

Question

我正在尝试更新Ionic应用程序中的动态项目；我想在调用addItem()函数时更新一个数字（数量）。我不知道如何更新quantity，以便可以根据其密钥更新列表中的每个密钥。

items.page.html

<ion-item *ngFor="let item of collection.items">
    <span [(ngModel)]="quantity[item.id]" name="quantity[{{ item.id }}]" ngDefaultControl>
        {{ item.quantity }}
    </span>
</ion-item>

items.page.ts

quantity = [];

constructor() {}

addItem(itemId: any) {
    const body = new FormData();
    body.append('item_id', itemId);
    this.http
        .post('http://api.example.com/endpoint', body)
        .subscribe(
            (response: any) => {
                const data = {
                    key: itemId,
                    value: response.item_quantity
                };
                // how do I get the returned value from the API
                // to display in my span?
                this.quantity.push(data);
            },
            error => {}
        );
}

Answer 1

您可以通过两种方式完成此操作

一个：

**NOT work**
model=this.fb.group({
   color: ['']
}
addVariationToItem() {
  const variationsControl = this.itemForm.get('Variations') as FormArray; 
  //we are adding the same object
  variationsControl.push(this.model);
}

两个：

<ion-item *ngFor="let item of collection.items">
    <span>
        {{ getItemQuantity(item.id) }}
    </span>
</ion-item>

并且有必要像这样检测addItem调用中的更改：

<ion-item *ngFor="let item of collection.items">
    <span [innerHTML]="getItemQuantity(item.id)">
    </span>
</ion-item>