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

Question

HTML file:

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

The state value is changed by an EventListener, and will change from "connecting" to "ready".

What I want is to show "this is a" at the beginning then change to "this is b" when state is "ready", but looks it doesn't work. *ngIf doesn't work either. What should I do? Subscribe it?

If using a timer,the page will change, such as :

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

But I don't want to use Timer.

Thanks in advance.

Answer 1

Try this, there is a small mistake in your code. if isshow is a function then you should pass it with brackets as mentioned below.

template

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

component

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

Demo

I hope this will help you. If you have any doubts or suggestions let me know.

Answer 2

it's often better to toggle an element's presence using *ngIf .

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