Question

在组件中，我有一个与此相似的源代码：

<ng-template let-col let-row="rowData" let-rowIndex="rowIndex" pTemplate="body">
  <span *ngIf='row.job_id'>
    {{row.job_id}}
  </span>
  <span *ngIf='!row.job_id'>
    Job ID Not available
  </span>
</ng-template>

我想在单个else中使用ng-template条件。我该如何实现？

Answer 1

如果只需要更改跨度内的文本，则可以简单地使用：

{{ row.job_id ? row.job_id : 'Job ID Not available' }}

像这样避免* ngIf

如果您真的想使用if / else，那似乎可行：

<ng-template let-col let-row="rowData" let-rowIndex="rowIndex" pTemplate="body">
    <span *ngIf='row.job_id; else notAvailable'>
       {{row.job_id}}
    </span>
    <ng-template #notAvailable>
      <span>
        Job ID Not available
      </span>
    <ng-template>
</ng-template>

Answer 2

将else路径包装在ng-template标记中，为其提供模板变量，然后使用以下变量：*ngIf='row.job_id; else elsePath;'

与此类似：

<ng-template let-col let-row="rowData" let-rowIndex="rowIndex" pTemplate="body">
  <span *ngIf='row.job_id; else elsePath;'>
    {{row.job_id}}
  </span>
  <ng-template #elsePath>
    Job ID Not available
  </ng-template>
</ng-template>

或者

只需使用三元运算符：

<ng-template let-col let-row="rowData" let-rowIndex="rowIndex" pTemplate="body">
  <span>
    {{ row.job_id ? row.job_id : 'Job ID Not available' }} 
  </span>
</ng-template>

角度4-在p数据表中使用带有ng模板的else条件。当前模板中有2个ngif，要避免使用两个ngif

2 个答案:

或者