Angular 5 [ngForOf] 仅显示循环中的最后一条记录答案

【问题标题】：Angular 5 [ngForOf] shows only the last record on the loopAngular 5 [ngForOf] 仅显示循环中的最后一条记录
【发布时间】：2019-02-20 07:26:32
【问题描述】：

我可以循环，但我不明白为什么它只显示最后一条记录的值

invoice-list.html

<ng-template ngFor let-i [ngForOf]="invoiceService.selectedInvoice.purchases"> 
{{i.product.name | json}}   
   <input type="text" name="name" class="form-control" #pname="ngModel" [(ngModel)]="i.product.name" readonly>
</ng-template>

这是一个例子StackBlitz(login => user:user@user.com | pass: user123)

怎么去这个视图？

【问题讨论】：

怎么去这个视图？
只需点击列表发票中的编辑按钮
编辑按钮在哪里？
带有编辑符号的蓝色按钮。
好的，预期的输出是什么

标签： angular angular5 ngfor ng-template

【解决方案1】：

因为您使用两种方式绑定 NgModel，它将传入值绑定到同一个变量 - i.product.name。在这里使用 ngModel 没有多大意义。您使用#invoiceFrom='NgForm 导出您的表单，这样您就可以在那里进行所有验证。只需传递一个值：

<input type="text" name="name" class="form-control [value]="i.product.name" readonly>

【讨论】：