为什么在forkJoin（）。subscribe（）之后[隐藏]不起作用？

Question

我有以下模板：

<div [hidden]="this.days.length > 0" fxLayoutAlign="center center">
  <div style="font-size: 1.4em; color: #4e4e4e;">
    Empty
  </div>
</div>

由于某种原因，条件this.days.length > 0不起作用。在forkJoin().subscribe({..})之后，列表this.days不是空的，但是上面的div仍然没有被隐藏。

ngOnInit() {

  forkJoin(
    this.groupService.getData(this.groupId),
    // ..
  ).subscribe(
    data => {

      // .. adding things to this.days ..

      console.log(this.days.length > 0); // Prints 'true'
    });
}

为什么这不起作用？

Answer 1

hidden属性设置样式：

display: none;

但是fxLayoutAlign指令overrides it带有：

display: flex;

---

为了隐藏元素，您可以定义一个类样式，其中通过display标志为!important属性赋予更高的优先级：

.not-visible {
  display: none !important;
}

并将该类有条件地应用于元素：

<div [class.not-visible]="this.days.length > 0" fxLayoutAlign="center center">

有关演示，请参见this stackblitz。

---

一种替代方法是使用*ngIf="!days.length"，如PierreDuc在评论中所建议。但是，结果有些不同：当条件ngIf为false时，元素根本不存在于DOM中。