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更改，并将从＆＃34;连接＆＃34;更改准备好＆＃34;。

我想要的是展示＆＃34;这是一个＆＃34;在开始时然后改为＆＃34;这是b＆＃34;  当状态是＆＃34;准备好＆＃34;，但看起来它不起作用。 * ngIf也不起作用。 我该怎么办？订阅吗？

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但我不想使用Timer。

提前致谢。

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');
  }

Demo

我希望这会对你有所帮助。如果您有任何疑问或建议请告诉我。

Answer 2

使用*ngIf切换元素的存在通常会更好。

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