angular4页面根据某些属性动态变化

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”，但看起来不起作用。 我该怎么办？ 提前致谢。

Answer 1

我认为您的显示：没有在您的样式中使用* ngIf替代

<div *ngIf="isshow">

Answer 2

将您的html更改为以下内容：

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

您可以参考此答案以查看差异： https : //stackoverflow.com/a/43034841/3329836

Answer 3

这里只是一个建议。 由于内部存在一些恶作剧，Angular会使用它的变更检测系统，因此最好不要使用getter进行绑定。 你的

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

每当您的组件检查更改时都会调用（将console.log放在return (this._state === 'ready');之前return (this._state === 'ready');您会看到）

最好使用管道或仅将条件this._state === 'ready'放入绑定中，这样，只有当this._state实际更改时， this._state调用它

对于绑定到您的字段的函数也是如此，即您不应在绑定中使用它们

Answer 4

尝试添加[hidden] { display: none; } [hidden] { display: none; } （请注意应将其全局添加）。 我不确定为什么，但是有点像缺少Angular或存在一些问题。 我发现了一些老问题，但很久以前就关闭了它们，但是在plunkr中却有所帮助。