时间戳

首页 > 解决方案 > 基于函数返回显示不同元素的正确方法是什么

html - 基于函数返回显示不同元素的正确方法是什么

问题描述

所以基本上我想要展示的

  1. 作业未处理时的“Something1”
  2. 作业正在运行且状态为“0”时的“Something2”
  3. 'Something3' 当作业正在运行但状态是别的东西

我尝试了以下代码片段，但看起来外部模板中的 let-status 永远不会被分配。不确定实现是否正确，谁能给我两分钱来说明如何使这个逻辑起作用？

谢谢。

<span *ngIf="!isProcessing(); else elseBlock">
        Something1
</span>
<ng-template #elseBlock let-status="queryPlaybackStatus()" *ngIf="queryStatus() === '0'; else innerElseBlock">
    <span>
        Something2
    </span>
    <ng-template #innerElseBlock>
        <span>
            Something3
        </span>
    </ng-template>
</ng-template>

标签： htmlangular

解决方案

我建议在你的组件中定义一个字符串，你可以更好地控制你的逻辑。在组件中，将字符串设置为适当的文本。

然后绑定到模板中的那个字符串。

我在这里没有你需要的所有逻辑，但是像这样：

  isImage = false;

  get statusText(): string {
    if (!isProcessing()) {
      this.isImage = false;
      return 'Something1';
    } else {
      this.isImage = true;
      return 'path to image';
    }
  }

这使用了一个 getter，它为组件属性提供了一种具有逻辑的方法。

然后只需statusText在模板中绑定即可。

<span *ngIf='!isImage'>
        {{statusText}}
</span>
<span *ngIf='isImage>
    <img ...>
</span>

推荐阅读