`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

Вы должны использовать 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 3

У вас есть две проблемы:

• Нельзя иметь две структурные директивы для одного и того же хост-элемента.

• Шаблон else из директивы ngIf должен быть заключен в <ng-template>.

Из угловой документации :

Когда-нибудь вы захотите повторить блок HTML, но только когда определенное условие выполнено. Вы попытаетесь поместить и * ngFor, и * ngIf в один и тот же элемент хоста. Angular не позволит вам. Вы можете применять только одну структурную директиву к элементу.

Причина в простоте. Структурные директивы могут делать сложные вещи с элементом host и его потомками. Когда две директивы претендуют на один и тот же хост-элемент, какая из них имеет приоритет? Что должно идти первым, 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>

Answer 4

Вы не можете иметь две привязки шаблона на одном и том же элементе под углом, один из подходов - использование

 <span ></span> 

или используя

<ng-template> </ng-template>