Angular 6: Как мы можем обновить несколько значений поля ввода, установив флажки?

Question

У меня есть проект, и я получаю данные от вызова API. Данные динамически выбираются из базы данных и отображаются в представлении.

Теперь у меня есть флажки и поле ввода для каждого значения, У меня есть кнопка updateALL, я хочу, чтобы значение, которое я вставляю в поле ввода, обновлялось нажатием кнопки updateAll, чей флажок установлен.

И чтобы установить все флажки, а также обновить значения полей ввода.

Примерно так

<div *ngFor="let product of products">
<input type="submit" value="Update All"><br>
  <input type="checkbox" name="vehicle1" value="Bike">
  <input type="text">
  <input type="submit" value="update">
</div>

как то так

Как я могу связать вместе значение флажка и значение поля ввода, чтобы я мог обновить значение? У меня есть данные из API в формате JSON, как

[{id:'1', price:'20',title:'bag'},{id:'2', price:'10',title:'shirt'}]

Я хочу обновить только цену, введя цену в поле ввода, а также установив флажок. Как я могу связать оба значения?

Я хочу что-то вроде этого, флажок и измененные входные значения должны быть извлечены из вида, чем при нажатии кнопки обновить все, что я могу обновить выбранные значения.

И я также хочу, чтобы, если я установил флажки, установил все флажки, флажки и соответствующие значения полей ввода также должны были быть обновлены нажатием кнопки update all.

Answer 1

Чтобы достичь ожидаемого результата, используйте нижеприведенную опцию использования ngModel, щелкните и измените события, чтобы обновить массив объектов products

1. Добавление ngModel в поля ввода и флажок с событием щелчка для обновления цены

<input type="submit" value="Update All" (click)="updatePriceAll()">
<div *ngFor="let product of products;">
<br>
  <input type="checkbox" name="vehicle1" value="Bike" (change)= "updatePrice(product, vehicle[product.id])" [(ngModel)]="vehicle[product.id]">
  <input type="text" [(ngModel)]="newPrice[product.id]">
  <input type="submit" value="update" (click) ="updatePrice(product, true)">
</div>

2. Использовать событие изменения для флажка и флажок, чтобы проверить проверенное состояние
3. В component.ts созданы методы updatePrice и updatePriceAll для обновления при проверке, нажатием кнопки update, updateaLL

newPrice= {}; vehicle = {}; products= [{id:'1', price:'20',title:'bag'},{id:'2', price:'10',title:'shirt'}]</p> <p>updatePrice(val, flag){ if(flag){ this.products = this.products.map(v => { if(v.id === val.id){<br> v.price = this.newPrice[v.id]; } return v }) } console.log(this.newPrice[val.id]); }</p> <p>updatePriceAll(){ this.products = this.products.map(v => { if(this.newPrice[v.id]){<br> v.price = this.newPrice[v.id]; } return v }) console.log(this.newPrice); }

пример рабочего кода - https://stackblitz.com/edit/angular-gtnkor?file=src/app/app.component.html