Блог

Я немного смущен тем, что использовать, кроме [(ngModel)]. Как вы можете видеть ниже фрагмента кода и предоставленных изображений, привязка ngModel применяется ко всем другим полям ввода, когда я нажимаю кнопку Редактирования из-за *ngFor. Не могли бы вы, ребята, порекомендовать мне несколько предложений?

нажмите здесь, чтобы увидеть изображение

 Below is cart component template.

<div class="container my-5">
    <h1>Your Cart</h1>
       <div *ngFor="let item of listAlbums" class="container">
            <div class="row">
                <div class="col-md-4">
                    <h6>Item name: {{item.title}}</h6>
                    <img src="{{item.thumbnailUrl}}">
                    <input class="form-control" type="number" value="{{item.quantity}}">
                    <button (click)="remove(item)" class="btn btn-danger mx-3">X</button>
                    <button (click)="edit(item)" class="btn btn-warning">Edit</button>
                    <input type="text" placeholder="{{item.title}}" [(ngModel)]="newTitle" [hidden]="!hideEdit">
                </div>
            </div>
</div> 

   
Below is the cart component.

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.scss']
})
export class CartComponent implements OnInit {
  listAlbums:Album[]=[]
  hideEdit:boolean=false
  newTitle:string;
  constructor(private productService:ProductService) {
   }

  ngOnInit() {
    this.productService.itemList.subscribe(data=>
      {this.listAlbums = data })
  }
  remove(item:Album) {
    this.productService.removeItem(item)
  }
  edit(item:Album) {
    this.hideEdit = !this.hideEdit
    this.productService.editItem(item, this.newTitle)
  }
} 

Вы можете просто создать массив и привязать его к ngModel

 <div class="container my-5">
    <h1>Your Cart</h1>
       <div *ngFor="let item of listAlbums; let i = index" class="container">
            <div class="row">
                <div class="col-md-4">
                    <h6>Item name: {{item.title}}</h6>
                    <img src="{{item.thumbnailUrl}}">
                    <input class="form-control" type="number" value="{{item.quantity}}">
                    <button (click)="remove(item)" class="btn btn-danger mx-3">X</button>
                    <button (click)="edit(item)" class="btn btn-warning">Edit</button>
                    <input type="text" placeholder="{{item.title}}" [(ngModel)]="newTitle[i]" [hidden]="!hideEdit">
                </div>
            </div>
</div>

newTitle = Array(listAlbums.length); // it will create an array of specific length.
 

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

Если вы хотите, чтобы пользователь редактировал заголовок отдельных элементов в корзине, затем свяжитесь непосредственно с заголовком этого элемента, вместо того чтобы обновлять одну и ту же строку(новый заголовок) для всех. Используйте [(ngModel)] = «пункт.название» в

 <input type="text" placeholder="{{item.title}}" [(ngModel)]="item.title" [hidden]="!hideEdit">