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

Question

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

发票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:[email protected] | pass: user123)

怎么去这个观点？

Answer 1

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

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