Angular `ngFor`-条件模板抛出错误为'Can'；不能在一个元素上有多个模板绑定`

我正在尝试将内联编辑与table

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>

{{item.Id}
{{item.Name}
{{item.Description}
{{item.UpdatedBy}
{{item.updateDate}
{{item.Id}
{{item.Name}
{{item.Description}
{{item.UpdatedBy}
{{item.updateDate}

但在以下方面出现了错误：

未捕获错误：模板分析错误：
一个元素上不能有多个模板绑定。仅使用一个前缀为*（“
-->

---

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

根据angular，您不能使用多个绑定。您可以尝试使用ng模板进行循环绑定

{{item.Id}
{{item.Name}
{{item.Description}
{{item.UpdatedBy}
{{item.updateDate}
{{item.Id}
{{item.Name}
{{item.Description}
{{item.UpdatedBy}
{{item.updateDate}

不能将两个模板以角度绑定到同一元素上，一种方法是使用

 <span ></span> 

或者使用

<ng-template> </ng-template>

您有两个问题：

• 同一主体图元上不能有两个结构指令

• ngIf指令中的else模板应包装在
  中

:

有一天，你会想重复一块HTML，但只有在特定条件为真的情况下。你会尝试将*ngFor和*ngIf放在同一个宿主元素上。Angular不允许。你只能对一个元素应用一个结构指令

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

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

{{item.Id}
{{item.Name}
{{item.Description}
{{item.UpdatedBy}
{{item.updateDate}
{{item.Id}
{{item.Name}
{{item.Description}
{{item.UpdatedBy}
{{item.updateDate}

您应该使用它来避免任何副作用

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

{{item.Id}
{{item.Name}
{{item.Description}
{{item.UpdatedBy}
{{item.updateDate}
{{item.Id}
{{item.Name}
{{item.Description}
{{item.UpdatedBy}
{{item.updateDate}

可能的副本并不完全是副本，因为代码中有两个问题。这将不起作用！将ngFor指令的主机容器替换为，而不是。使用时，将不显示任何内容。

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