Question

我正在创建购物车。我有用于商品数据的对象数组和购物车商品数据的数组。我尝试建立有条件按钮的购买物品按钮，如果购物车数据中的同一产品则需要显示“ + 3-”（数量来自ID的购物车数据），如果产品不在购物车中，则只需显示“购买”按钮。我已经在https://stackblitz.com/edit/angular-267ern上实现了这个相关问题。

我尝试解决：

烟斗
trackBy，
尝试更改产品数组数据映射并返回与购物车数据进行比较的值（这是为了寻求解决方案，但我做不到）。在这里使用管道可能会带来一些复杂性（n * 2）问题。

因此，寻找解决方案以减少复杂性，至少可以解决该问题。如果可能，请注意复杂性。

Answer 1

我想我理解您的问题，这是您想要的吗？

在TS中（从堆栈闪电中复制）

 export class AppComponent {
      products :product[]= [
        { name: 'Radio', price: 34, _id: '12345' },
        { name: 'TV', price: 44, _id: '12346' },
        { name: 'Bascket', price: 16, _id: '12347' },
        { name: 'Banana', price: 4, _id: '12348' },
        { name: 'Bike', price: 5000, _id: '12349' },
        { name: 'Toast', price: 5, _id: '12350' },
        { name: 'Shirt', price: 17, _id: '12351' }
      ];
    isCart (id){
    return this.cart.findIndex((x)=>x._id == id)>=0;
    }
    quantity(id){
    return this.cart.find((x)=>x._id == id).quantity;
    }
    buy(prod:product){
  if(this.cart.findIndex((x)=>x._id == prod._id)<0){
this.cart.push({name:prod.name,price:prod.price,_id:prod._id,quantity:1})
  }else{ 
let prod1 = this.cart.find((x)=>x._id == prod._id);
prod1.quantity +=1;
  }

}
      cart = [
        { name: 'Radio', price: 34, _id: '12345', quantity: 5 },
        { name: 'Toast', price: 5, _id: '12350', quantity: 1 },
      ]
    }
    export interface product{
    name:string;
    price:number;
    _id:string;
    }

和HTML：

<label *ngFor="let item of products">
  <span>
      <p>Name: {{item?.name}}, Price: {{item?.price}}</p>
  </span>
  <button  (click)="buy(item)">
    <span>{{isCart(item._id)?quantity(item._id)+'-':'Buy'}} 
  </span>
  </button>
</label>

使用Angular 6 ngFor，如何在与其他数据数组比较时更改某些内容？

1 个答案: