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

Question

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

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)

如何进入此视图？  

Answer 1

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

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