Угловой получить доступ к динамическим элементам и изменить значения ⇐ Javascript

[Anonymous]

У меня есть угловой компонент, который содержит количество продуктов, которые динамически создаются с использованием директивы NGFOR. Здесь мне нужно получить доступ к количеству и управлению каждому продуктам, используя кнопки Increment и уменьшение. Но это было несколько важно сделать. Может ли кто -нибудь предложить хороший подход оптимизации для обработки этого.
html < /h2>

Код: Выделить всё

[h4]{{product.productName}}[/h4]
Rs. {{product.productPrice}}

remove





add




< /code>
 ts file < /h2>
export class ProductsComponent implements OnInit {
@ViewChildren('quantityreference') dynamicElements!: QueryList;
productlists = JSON.parse(`[
{
"productId": "T000",
"productName": "Punnakuuu",
"productQuantity": "2",
"productPrice": "40",
"gst":"20"
},
{
"productId": "T1111",
"productName": "Thenkaai Punnaku",
"productQuantity": "2",
"productPrice": "40",
"gst":"18"
},
{
"productId": "MT1",
"productName": "Mattu Theevanam",
"productQuantity": "2",
"productPrice": "55",
"gst":"18"
},
{
"productId": "CP1",
"productName": "m Punnaku",
"productQuantity": "10",
"productPrice": "55",
"gst":"12"
},
{
"productId": "CP2",
"productName": "ell Punnaku",
"productQuantity": "10",
"productPrice": "22",
"gst":"12"
}]`
);

ngtemplatetest: boolean = true;
quantity: number = 0;
constructor() { }

ngOnInit(): void {
this.ngtemplatetest = true;
}
increment(indexvalue: number) {
this.quantity++;
let cc = document.getElementById('quantity_input' + indexvalue.toString())
console.log("the index value is" + cc?.nodeValue);

}
decrement(indexvalue: number) {
if (this.quantity > 0) {
this.quantity--;
}
}
}

В настоящее время, когда я меняю Quanity, это отражает во всех продуктах. Может ли кто -нибудь предоставить решение

Подробнее здесь: https://stackoverflow.com/questions/797 ... the-values