Angular или html как отобразить шаблон по условию

Я новичок в 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>

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

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

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

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

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

0
0
826
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
  1. Wrap your td content within ng-template

  2. Replace div by ng-container in tr section.

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

спасибо Но это не работает - теперь я вообще не вижу значений столбцов (я пытался поиграть с этим, но все равно не получается)

RMagen 31.10.2018 13:35

Я просто переместил ng-template за пределы и определил контекст для шаблона. Пожалуйста, проверьте ответ, если это поможет сейчас. Вот пример для ссылки - stackblitz.com/edit/angular-ngif-else-fku8pb

Sunil Singh 31.10.2018 14:04

Другие вопросы по теме