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更改，并将从“连接”更改为“就绪”。

我想要的是在开头显示“这是一个”然后改为“这是b”  当状态“准备好”，但看起来它不起作用。 我该怎么办？提前谢谢。

Answer 1

我认为你的显示：没有在你的风格使用中覆盖* ngIf而不是

<div *ngIf="isshow">

Answer 2

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

<text text-anchor="middle">9650</text>

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

Answer 3

这里只是一条建议。由于一些内部的恶作剧与它的变化检测系统有关，因此最好不要使用吸气剂进行装订。 您的

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

每当您的组件检查更改时，都会调用

（只需在console.log之前将return (this._state === 'ready');放在那里，然后您就会看到）

最好使用竖线或只是将条件this._state === 'ready'放入绑定中，这样只有在this._state实际更改时才会调用它

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

Answer 4

尝试在样式表中添加[hidden] { display: none; }（请记住它应该全局添加）。我不确定为什么，但它在Angular中看起来有些缺失，或者它有一些问题。我发现了一些关于它的旧问题，但是很久以前它们已经关闭了，但是在plunkr中它有所帮助。