角度4-在p-datatable中使用ng-template的其他条件。目前模板内部有2个ngif,想避免使用两个ngif

问题描述 投票:3回答:2

在一个组件中,我有一个与此类似的源代码:

<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条件。我怎么能实现它?

angular
2个回答
4
投票

如果您只需要更改跨度内的文本,则可以使用:

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

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>
© www.soinside.com 2019 - 2024. All rights reserved.