угловой или HTML, как отобразить шаблон по условию

Question

Я новичок в угловых и HTML - это должен быть простой вопрос, но я не мог найти ответ У меня есть таблица и кнопка «Сохранить», когда пользователь нажимает на нее, значения в таблице необходимо отключить - я использую таблицу primeNg со следующим кодом

<ng-template pTemplate="body" let-category let-index="rowIndex">
    <tr [pSelectableRow]="category">
      <div *ngIf="isEditable  then editTemplate  else saveTemplate">
          <td pEditableColumn #editTemplate>
          <p-cellEditor>
            <ng-template pTemplate="input">
              <input pInputText type="text" [(ngModel)]="category.categoryName">
            </ng-template>
            <ng-template pTemplate="output">
              {{category.categoryName}}
            </ng-template>
          </p-cellEditor>
        </td>
          <td #saveTemplate>{{category.categoryName}}</td>
      </div>

      <!-- <td>{{category.categoryName}}</td> -->
      <td>{{category.effectiveDate | date: 'dd/MM/yyyy' }}</td>
      <td *ngIf="category.questions.length else changeNullToZero">
        {{category.questions.length}}
      </td>
      <td>
        <button type="button" label="Remove" icon="pi pi-check" 
                (click)="confirmDeleteCategory(categoriesList[index])"
          pButton></button>
      </td>
      <ng-template #changeNullToZero>
        <td>0</td>
      </ng-template>
    </tr>
</ng-template>

Я хочу, чтобы после нажатия кнопки Сохранить значения были отключены Я попытался дать псевдоним 2 шаблонам (editTemplate и saveTemplate) и проверить значение isEditable - но я делаю что-то неправильно ... обратите внимание, что когда я удаляю div с помощью ngIf и просто помещаю часть EditTample

<div *ngIf="isEditable ; then editTemplate ; else saveTemplate">

поля доступны для редактирования, и если я просто поставлю

<td>{{category.categoryName}}</td>

поле недоступно для редактирования, означающее, что часть if неверна

Answer 1

1. Оберните ваше td содержимое в ng-template

2. Заменить div на ng-container в секции tr.

 <ng-template pTemplate="body" let-category let-index="rowIndex">
    <tr [pSelectableRow]="category">
        <ng-container *ngTemplateOutlet="isEditable ? editTemplate : saveTemplate ; context: {category : category}">

        </ng-container>

    <!-- <td>{{category.categoryName}}</td> -->
    <td>{{category.effectiveDate | date: 'dd/MM/yyyy' }}</td>
    <td *ngIf="category.questions.length else changeNullToZero ">{{category.questions.length}}</td>
    <td>
        <button type="button" label="Remove" icon="pi pi-check" (click)="confirmDeleteCategory(categoriesList[index])"
                pButton></button>
    </td>
    <ng-template #changeNullToZero>
        <td>0</td>
    </ng-template>
    </tr>
    </ng-template>

    <ng-template  #editTemplate let-category="category"> 
        <td pEditableColumn>
        <p-cellEditor>
            <ng-template pTemplate="input">
                <input pInputText type="text" [(ngModel)]="category.categoryName">
            </ng-template>
            <ng-template pTemplate="output">
                {{category.categoryName}}
            </ng-template>
        </p-cellEditor>
    </td>
    </ng-template>

    <ng-template  #editTemplate let-category="category"> 
        <td #saveTemplate>{{category.categoryName}}</td>
    </ng-template>