"ngFor" - 条件模板抛出错误，因为"一个元素上不能有多个模板绑定"

Question

我正在尝试将内联编辑与表tr集成，我尝试如下：当用户单击编辑时，我正在切换到使用表单添加的新类。

<tbody>
<tr *ngFor="let item of data" *ngIf="item.Id !== editId; else #inlineEdit" [ngClass]="{'editEnabled' : item.Id === editId }">
<td>{{item.Id}}</td>
<td>{{item.Name}}</td>
<td>{{item.Description}}</td>
<td>{{item.UpdatedBy}}</td>
<td>{{item.UpdatedDate}}</td>
<td class="data-user-option">
<button type="button" class="edit-item" (click)="confirmEditRow(item)"></button>
<!-- <button type="button" class="delete-item" (click)="confirmRemoveRow(item)"></button> -->
</td>
<ng-container #inlineEdit>
<td>{{item.Id}}</td>
<td>{{item.Name}}</td>
<td>{{item.Description}}</td>
<td>{{item.UpdatedBy}}</td>
<td>{{item.UpdatedDate}}</td>
<td class="data-user-option">
<button type="button" class="edit-item" (click)="confirmEditRow(item)"></button>
</td>
</ng-container>
</tr>
</tbody>

但抛出错误：

Uncaught Error: Template parse errors: Can't have multiple template bindings on one element. Use only one attribute prefixed with * (" </thead> -->

在这种情况下如何处理？ 如何修复错误或正确的方法是什么？

Answer 1

根据角度，您不能使用多个绑定。您可以尝试将 ng-template 用于循环绑定。

<tbody>
<ng-container *ngFor="let item of data">
<tr *ngIf="item.Id !== editId; else #inlineEdit" [ngClass]="{'editEnabled' : item.Id === editId }">
<td>{{item.Id}}</td>
<td>{{item.Name}}</td>
<td>{{item.Description}}</td>
<td>{{item.UpdatedBy}}</td>
<td>{{item.UpdatedDate}}</td>
<td class="data-user-option">
<button type="button" class="edit-item" (click)="confirmEditRow(item)"></button>
<!-- <button type="button" class="delete-item" (click)="confirmRemoveRow(item)"></button> -->
</td>
<ng-template #inlineEdit>
<td>{{item.Id}}</td>
<td>{{item.Name}}</td>
<td>{{item.Description}}</td>
<td>{{item.UpdatedBy}}</td>
<td>{{item.UpdatedDate}}</td>
<td class="data-user-option">
<button type="button" class="edit-item" (click)="confirmEditRow(item)"></button>
</td>
</ng-template>
</tr>
</ng-container >
</tbody>

Answer 2

您不能在 Angular 的同一元素上绑定两个模板，一种方法是使用

<span ></span> 

或使用

<ng-template> </ng-template>

Answer 3

你应该使用ng-container，这样你就可以避免任何副作用。

<tbody>
<ng-container *ngIf="item.Id !== editId; else #inlineEdit">
<tr *ngFor="let item of data" [ngClass]="{'editEnabled' : item.Id === editId }">
<td>{{item.Id}}</td>
<td>{{item.Name}}</td>
<td>{{item.Description}}</td>
<td>{{item.UpdatedBy}}</td>
<td>{{item.UpdatedDate}}</td>
<td class="data-user-option">
<button type="button" class="edit-item" (click)="confirmEditRow(item)"></button>
<!-- <button type="button" class="delete-item" (click)="confirmRemoveRow(item)"></button> -->
</td>
<ng-container #inlineEdit>
<td>{{item.Id}}</td>
<td>{{item.Name}}</td>
<td>{{item.Description}}</td>
<td>{{item.UpdatedBy}}</td>
<td>{{item.UpdatedDate}}</td>
<td class="data-user-option">
<button type="button" class="edit-item" (click)="confirmEditRow(item)"></button>
</td>
</ng-container>
</tr>
</ng-container>
</tbody>

Answer 4

您有两个问题：

• 不能在同一宿主元素上有两个结构指令。

• 来自 ngIf 指令的 else 模板应该包装在<ng-template>中。

来自 Angular 文档：

总有一天你会想要重复一个 HTML 块，但只有当特定条件为真时。您将尝试将 *ngFor 和 *ngIf 放在同一个主机元素上。Angular 不会让你。一个图元只能应用一个结构指令。

原因是简单。结构指令可以对宿主元素及其后代执行复杂的操作。当两个指令声明同一个主机元素时，哪一个优先？哪个应该先走，NgIf 还是 NgFor？NgIf 可以取消 NgFor 的效果吗？如果是这样(看起来应该是这样)，Angular 应该如何概括取消其他结构指令的能力？

这些问题没有简单的答案。禁止多个结构指令使它们毫无意义。对于此用例，有一个简单的解决方案：将 *ngIf 放在包装 *ngFor 元素的容器元素上。一个或两个元素可以是 ng 容器，因此您不必引入额外的 HTML 级别。

<tbody>
<tr *ngFor="let item of data">
<ng-container*ngIf="item.Id !== editId; else #inlineEdit" [ngClass]="{'editEnabled' : item.Id === editId }">
<td>{{item.Id}}</td>
<td>{{item.Name}}</td>
<td>{{item.Description}}</td>
<td>{{item.UpdatedBy}}</td>
<td>{{item.UpdatedDate}}</td>
<td class="data-user-option">
<button type="button" class="edit-item" (click)="confirmEditRow(item)"></button>
<!-- <button type="button" class="delete-item" (click)="confirmRemoveRow(item)"></button> -->
</td>
</ng-container>
</tr>
</tbody>
<ng-template #inlineEdit>
<td>{{item.Id}}</td>
<td>{{item.Name}}</td>
<td>{{item.Description}}</td>
<td>{{item.UpdatedBy}}</td>
<td>{{item.UpdatedDate}}</td>
<td class="data-user-option">
<button type="button" class="edit-item" (click)="confirmEditRow(item)"></button>
</td>
</ng-template>