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: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>

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

Angular 5 [ngForOf] shows only the last record on the loop

angular

angular5

ngfor

ng-template