有一个标记:
<div class="scroll">
<table class="table table-striped">
<thead>
<tr>
<th>Image</th>
<th>Name</th>
<th>Author</th>
<th>Year</th>
<th>ISBN</th>
<th>Price</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let book of bookService.bookList">
<td><img src="../../{{book.ImagePath}}" width="100" height="150"></td>
<td>{{book.Name}}</td>
<td>{{book.Author}}</td>
<td>{{book.Year}}</td>
<td>{{book.ISBN}}</td>
<td>{{book.Price}}</td>
<td>{{book.Count}}</td>
<td>
<input type="text" name="Count" [(ngModel)]="Count">
<button class="btn btn-block btn-outline-success" (click)="onAdd(book, Count)"><i class="fa fa-plus"></i></button>
</td>
</tr>
</tbody>
最后一列如下:
问题如下:填充一个TextBox
时,该列中的所有TextBoxes
都被填充。
如何解决此问题?试图为文本字段赋予唯一的名称,并在form
中插入该单元格,但所有这些均无效。
答案 0 :(得分:3)
您需要使用角度模板为输入字段赋予唯一的名称
<input [name]="'count' + i" >
i
是*ngFor
的索引
但是我认为您遇到的主要问题是您需要绑定book.Count
而不是仅绑定Count
在后一种情况下,您将有一个名为Count
的变量,并将相同的变量绑定到所有输入字段。您需要将变量附加到书本身,因此它是唯一的。
答案 1 :(得分:2)
您所有的输入都具有相同的[(ngModel)]="Count"
和名称,因此,如果您更新其中一个,则所有输入都将被更新
如果您有一个count数组,则可以解决此问题。所以会像
<tr *ngFor="let book of bookService.bookList; let i = index">
...
<input type="text" [name]="'count' + i" [(ngModel)]="count[i]">
答案 2 :(得分:2)
人们给您HTML方式,我给您Angular方式:Running flutter packages pub upgrade failed with the following output:
ERR: The current Dart SDK version is 2.1.0-dev.1.0.flutter-69fce633b7.
Because tts requires SDK version >=1.8.0 <=2.0.0, version solving failed.
函数。
trackBy
这应该可以工作,但我从未测试过。
在任何情况下都应该起作用:
*ngFor="let book of bookService.bookList; trackBy: book.Name"
*ngFor="let book of bookService.bookList; trackBy: customTB"
答案 3 :(得分:1)
您输入的名称不能相同。 要解决此问题,您可以添加一个由循环 * ngFor
的索引填充的ID尝试一下:
<tr *ngFor="let book of bookService.bookList; let i = index">
<input type="text" name="Count_${i}" [(ngModel)]="count">