[英]Ionic (Angular) getting right data from array
I have array of data which includes array inside each item of it, so far i can show the exact data as I want except for id's. 我有一个数据数组,其中每个项目都包含数组,到目前为止,我可以显示我想要的确切数据,除了id之外。
explanation in screenshot
) explanation in screenshot
中数组ID explanation in screenshot
数组) Information provided in image of what ID I need to have
Controller
products: any[] = [];
limit = 10;
loading: any;
ngOnInit() {
this.getProducts();
}
async getProducts() {
this.loading = await this.loadingController.create({
message: 'Please wait...',
spinner: 'dots',
duration: 3000
});
await this.loading.present();
this.wishlistService.getProducts().subscribe((res) => {
console.log('res', res);
console.log('wishes', res['wishes']); // in screenshot you see this data
for (let wish of res['wishes']) {
this.products.push(wish.product);
}
this.hideLoading();
});
}
private hideLoading() {
this.loading.dismiss();
}
// For this function I need the upper ID (currently getting product ID I need wishlist item ID)
removeWishlist(id: string) {
console.log('product id for remove', id);
this.wishlistService.remove(id).subscribe(
data => {
this.alertService.presentToast(data['message']);
},
error => {
this.alertService.presentToast(error['message']);
}
);
}
View
<ion-row *ngIf="products.length>0 else noItem">
<ion-col size="6" class="prodCard" size-sm *ngFor="let product of products | slice:0:limit">
<img [src]="product.photo">
<h4 class="productTitle">
{{product.name}}
</h4>
<ion-row>
<ion-col size="9" size-sm>
Prices here
</ion-col>
<ion-col size="3" size-sm class="ion-text-center">
<ion-icon (click)="removeWishlist(product.id)" color="danger" name="heart"></ion-icon>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
Any idea? 任何想法?
In your display iterable you can add a property for ease of running code. 在可迭代的显示中,您可以添加属性以简化代码的运行。 Though I would suggest you to revisit your code, better if you can change in API.
尽管我建议您重新访问代码,但是如果可以更改API,则更好。 if you cant hope this helps
如果你不能希望这会有所帮助
products: any[] = [];
limit = 10;
loading: any;
ngOnInit() {
this.getProducts();
}
async getProducts() {
this.loading = await this.loadingController.create({
message: 'Please wait...',
spinner: 'dots',
duration: 3000
});
await this.loading.present();
this.wishlistService.getProducts().subscribe((res) => {
console.log('res', res);
console.log('wishes', res['wishes']); // in screenshot you see this data
for (let wish of res['wishes']) {
wish.product.iconId = wish.id; // <------ added this
this.products.push(wish.product);
}
this.hideLoading();
});
}
private hideLoading() {
this.loading.dismiss();
}
// For this function I need the upper ID (currently getting product ID I need wishlist item ID)
removeWishlist(id: string) {
console.log('product id for remove', id);
this.wishlistService.remove(id).subscribe(
data => {
this.alertService.presentToast(data['message']);
},
error => {
this.alertService.presentToast(error['message']);
}
);
}
In your html bind it iconId
在您的html中绑定它
iconId
<ion-row *ngIf="products.length>0 else noItem">
<ion-col size="6" class="prodCard" size-sm *ngFor="let product of products | slice:0:limit">
<img [src]="product.photo">
<h4 class="productTitle">
{{product.name}}
</h4>
<ion-row>
<ion-col size="9" size-sm>
Prices here
</ion-col>
<ion-col size="3" size-sm class="ion-text-center">
<ion-icon (click)="removeWishlist(product.iconId)" color="danger" name="heart"></ion-icon>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.