Estoy un poco confundido acerca de qué usar además de [(ngModel)]. Como puede ver debajo del fragmento de código y las imágenes proporcionadas, el enlace de ngModel se aplica a todos los demás campos de entrada cuando hago clic en el botón Editar debido a *NgFor. ¿Podrían recomendarme algunas sugerencias?
haga clic aquí para ver la imagen
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) } }Simplemente puede crear una matriz y vincularla a 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.De esta manera, puede vincular todas las entradas a una instancia de matriz específica por separado.
Si desea que el usuario edite el título de los artículos individuales en el carrito, vincúlelos directamente al título de ese artículo en lugar de actualizar la misma cadena (nuevo título) para todos. Use [(ngModel)] = "item.title" en
<input type="text" placeholder="{{item.title}}" [(ngModel)]="item.title" [hidden]="!hideEdit">