angular4 html根据某些变量动态变化

Question

HTML档案：

<div [hidden]="isshow">
  <h1>this is a</h1>
</div>
<div [hidden]="!isshow">
 <h1>this is b</h1>
</div>

component.ts：

  public get isshow() {
    return (this._state === 'ready');
  }

状态值由EventListener更改，并且将从“正在连接”更改为“就绪”。

我想要的是在开始时显示“ this is a”，然后在状态为“ ready”时更改为“ this is b”，但看起来不起作用。 * ngIf也不起作用。 我该怎么办？ 订阅吗？

如果使用计时器，页面将更改，例如：

 setTimeout(()=>{this._state = 'ready'},30000); 

但是我不想使用计时器。

提前致谢。

Answer 1

试试看，您的代码中有一个小错误。 如果isshow是一个函数，则应使用方括号将其传递，如下所述。

模板

<div [hidden]="isshow()">
      <h1>this is a</h1>
    </div>
    <div [hidden]="!isshow()">
     <h1>this is b</h1>
    </div>

零件

isshow() {
    return (this._state === 'ready');
  }

演示版

我希望这能帮到您。 如果您有任何疑问或建议，请告诉我。

Answer 2

通常最好使用*ngIf来切换元素的存在。

  <div *ngIf="isshow()">
      <h1>this is a</h1>
    </div>
    <div *ngIf="!isshow()">
     <h1>this is b</h1>
    </div>