角度或html如何按条件显示模板

Question

我是 Angular 和 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 的值 - 但我做错了一些事情...... 请注意，当我使用 ngIf 删除 div 并放置 EditTample 部分时

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

这些字段是可编辑的，如果我只是把

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

该字段不可编辑，仅表示 if 部分错误

Answer 1

1. 将您的td 内容包装在ng-template 中

2. 将 tr 部分中的 div 替换为 ng-container。

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