如何在 Ionic 中使用 ngModel 更新动态跨度？

Question

I'm trying to update dynamic items in my Ionic app; I want to update a number (quantity) when the addItem() function is called. I can't figure out how to update quantity so that I can update each one in my list based on their key.

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

You can do this in two ways

One:

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

Two:

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

And It is necessary to detect change in addItem call like this:

import { ChangeDetectorRef } from '@angular/core';

public quantity: array = [];
public cdRef: ChangeDetectorRef;

constructor(cdRef: ChangeDectorRef) {}

getItemQuantity(itemId: any): number {
    if (this.quantity.length === 0) {
        return 0;  
    }

    return this.quantity.find(q => q.key === itemId).value;
}

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
                };
                this.quantity.push(data);
                this.cdRef.detectChanges(); // here you need to detect change
            },
            error => {}
        );
}