javascript - 离子（角度）从数组中获取正确的数据

Question

我有一个数据数组，其中包括每个项目内的数组，到目前为止，我可以显示我想要的确切数据，除了 id。

逻辑

1. 在数组中显示数组
2. 获取数组 id（不是数组 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>

任何想法？

标签： javascriptarraysangularionic-framework

Answer 1

在您的显示迭代中，您可以添加一个属性以便于运行代码。尽管我建议您重新访问您的代码，但如果您可以更改 API，那就更好了。如果你不能希望这有帮助

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']);
      }
    );
  }

在你的 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>