Используя Angular 6 ngFor, как изменить какой-либо контент при сравнении с другим массивом данных?

Question

Я создаю корзину.У меня есть массив объектов для данных продуктов и массив данных товаров корзины.Я пытаюсь создать кнопку, чтобы купить товар, имея условную кнопку, если тот же продукт в данных корзины, то нужно показать «+ 3 -» (количество поступает из данных корзины по идентификатору), а если продукт не в корзине, то просто показать кнопку «купить»,Эта связанная проблема, которую я реализовал на https://stackblitz.com/edit/angular-267ern.

, я пытаюсь решить с помощью:

1. pipe,
2. trackBy,
3. Попробуйте изменитьКарта данных массива продуктов и возвращаемые значения по сравнению с данными корзины (это для попытки найти решение, но я не смог).Здесь, однако, использование pipe может иметь некоторую проблему со сложностью (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>