如何防止 [(NgModel)] 应用于所有其他输入字段？答案

【问题标题】：How to prevent from [(NgModel)] that's being applied to all other input fields?如何防止 [(NgModel)] 应用于所有其他输入字段？
【发布时间】：2021-12-05 03:53:38
【问题描述】：

除了 [(ngModel)] 之外，我对使用什么感到有点困惑。正如您在提供的代码 sn-p 和图像下方可以看到的那样，由于 *NgFor，当我单击编辑按钮时，ngModel 绑定将应用于所有其他输入字段。请各位大神给我一些建议好吗？

click here to see image

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)
  }
}

【问题讨论】：

标签： javascript html angular typescript

【解决方案1】：

如果您希望用户编辑购物车中单个商品的标题，则直接绑定到该商品的标题，而不是为所有商品更新相同的字符串（newTitle）。在

中使用 [(ngModel)] = "item.title"

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

【讨论】：

感谢您的回复。我已经试过了。假设我的购物车中有 8 件商品。当我点击编辑按钮时，所有 8 个输入同时启用。
那是因为您对所有输入都使用了相同的 var hideEdit，尝试传递索引来编辑 func：使用 *ngFor="let item of listAlbums; let i = index" (click)="edit(item,i)" 并使用 hideEdit 作为数组来像这样更新[hidden]="!hideEdit[i]"跨度>

【解决方案2】：

您可以创建一个数组并将其绑定到 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.

这样您可以将所有输入分别绑定到特定的数组实例。

【讨论】：