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

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

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

  1. трубка,
  2. trackBy,
  3. Попробуйте изменить карту данных массива товаров и вернуть значения по сравнению с данными корзины (это попытка найти решение, но я не смог). Здесь bu, использующий pipe, может иметь некоторую проблему сложности (n * 2).

Так ищу решение для меньшей сложности и, по крайней мере, решение этой проблемы. По возможности позаботьтесь о сложности.

Пожалуйста, прочтите При каких обстоятельствах я могу добавить к своему вопросу «срочно» или другие похожие фразы, чтобы получить более быстрые ответы? - вкратце, это не идеальный способ обращения к волонтерам и, вероятно, контрпродуктивно для получения ответов. Пожалуйста, воздержитесь от добавления этого к своим вопросам.

halfer 27.10.2018 10:57
0
1
359
1

Ответы 1

Думаю, я понимаю вашу проблему, вы этого хотите?

В ТС (скопировал из stackblitz)

 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>

Спасибо за помощь. Я не уверен, помогает ли это, когда он добавляет больше товаров и обновляет данные о товарах в корзине. Не могли бы вы предложить метод динамического изменения данных, например, после добавления еще одной информации и обновления данных об элементе корзины, без перезагрузки страницы. Ваш метод отлично работает для статических данных. Пробую с динамическим изменением данных. Если и проблема, то пингую.

Vikas Kumar 26.10.2018 09:39

@VikasKumar Я изменил код, теперь вы можете добавлять товары в корзину.

lesiano 26.10.2018 09:59

Вы учли сложность своего решения? Потому что я ищу менее сложное решение.

Vikas Kumar 26.10.2018 10:43

Другие вопросы по теме