Angular 离子4多阵列for环路
我需要在ionic4中使用一个Angular 离子4多阵列for环路,angular,ionic4,Angular,Ionic4,我需要在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}} </i
*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>
您应该将两个数组映射到一个新的对象数组中,假设它们总是相互关联,该数组的类型为
{name:string;price:number;}
这样做,
this.namePriceArray = this.male_addition.flatMap(data =>
data.name.map((n, i) => ({name: n, price: data.price[i]})));
然后您可以在*ngFor
的内部使用this.namePriceArray
{{item.name}{{item.price}}
+{{prop}يال
您好,谢谢您的帮助,但您可以帮我更多这对我不起作用尝试此解决方案时您会看到什么问题?它工作正常,但我忘记按类别在循环中告诉您数据每个id都有男性添加数组我只需要在男性添加数组中显示名称现在他显示所有数据而不是id您试图实现什么?按类别划分的循环中的数据是什么意思?我在API响应中没有看到单词category。
this.namePriceArray = this.male_addition.flatMap(data =>
data.name.map((n, i) => ({name: n, price: data.price[i]})));
<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>