for循环中的离子4多阵列

Question

我需要在 ionic4 中使用一个 *ngFor。

这是我的代码，

        <ion-item *ngFor="let item of data.name">
            <ion-checkbox mode="md"  [(ngModel)]="data.checked" value="0" ></ion-checkbox>
            <ion-label class="title-add">{{item}} </ion-label>
            <ion-label slot="end" class="ion-text-end price-add">
                <ion-text color="medium">+ {{prop}} ريال </ion-text>
            </ion-label>
        </ion-item>

我有两个数组

data.name 和 data.price

我需要在 ion-item 中创建相同的循环。我怎样才能做到？

API 回复：

male_addition: [
{
id: 33,
name: [
"pepsi",
"cola"
],
name_additions: "drinks",
price: [
"3",
"3"
],
type: 2,
male_id: 15,
details_id: 45,
created_at: "2020-02-28 16:16:18",
updated_at: "2020-02-28 16:16:18"
}
]

Answer 1

您应该将两个数组映射到一个新的 {name: string; price: number;}.

类型的对象数组中，假设它们始终相互关联

做这样的事情，

this.namePriceArray = this.male_addition.flatMap(data => 
                                    data.name.map((n, i) => ({name: n, price: data.price[i]})));

然后你可以在 <ion-item>.

里面的 *ngFor 中使用 this.namePriceArray

        <ion-item *ngFor="let item of namePriceArray">
            <ion-checkbox mode="md"  [(ngModel)]="data.checked" value="0" ></ion-checkbox>
            <ion-label class="title-add">{{item.name}} {{item.price}}</ion-label>
            <ion-label slot="end" class="ion-text-end price-add">
                <ion-text color="medium">+ {{prop}} ريال </ion-text>
            </ion-label>
        </ion-item>

for循环中的离子4多阵列

ionic 4 multi array in for loop

angular

ionic4