Question

所以基本上我想展示的是

作业未处理时为“ Something1”
作业正在运行且状态为“ 0”时为“ Something2”
作业正在运行但状态不一样时为“ Something3”

我尝试了以下代码段，但是看起来外部模板中的let-status永远不会被分配。不确定实现方式是否正确，有人可以给我两美分，以了解如何使这种逻辑起作用吗？

谢谢。

Tag

Answer 1

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

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

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

  isImage = false;

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

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

然后将其绑定到模板中的statusText。

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

Answer 2

<span *ngIf="!isProcessing(); else elseBlock">
        Something1
</span>
<ng-container #elseBlock *ngIf="queryStatus() as status">
    <span *ngIf="status === '0'; else innerElseBlock">
            Something2
    </span>
    <ng-template #innerElseBlock>
        <span>
            Something3_with_{{status}}%
        </span>
    </ng-template>
</ng-container>

所以基本上，这需要ng-container和ng-template的神奇结合。

Answer 3

在我看来，您想要ngSwitch。这使您可以基于逻辑进行切换，应该将其封装在组件中，而不是模板中。首先，让我们创建一个将逻辑封装在组件中的属性：

CREATE TABLE IF NOT EXISTS test(
  id integer,
  words varchar(255)
)
;

INSERT INTO test(
  id,
  words
)
VALUES
(1, 'test'),
(2, 'finish')
;

接下来，让我们将public get currentStep(): number { if (!this.isProcessing) { return 1; } else if (this.queryStatus === 0) { return 2; } else { return 3; } }语句绑定到这个新创建的属性：

ngSwitch

那应该使您到达需要的地方。由于这很简单，我将created a stackblitz example演示其工作版本。在示例中，您可以单击一个按钮，并观察所有步骤的应用周期（我正在使用<div [ngSwitch]="currentStep"> <div *ngSwitchCase="1"> <p>Something1</p> <div>Put whatever you want in here! Images, etc.</div> </div> <div *ngSwitchCase="2"> <p>Something2</p> <p>Loading....</p> </div> <div *ngSwitchCase="3"> <p>Something3</p> <p>All done!</p> </div> </div>模拟长时间运行的服务器查询）。

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

3 个答案: