Angular 11 基于另一个元素的渲染有条件地渲染元素

Question

我正在尝试创建一个自定义扩展面板（我不想使用 Angular Material 的版本），但是由于我的实现方式，我遇到了生命周期挂钩的问题。

此扩展面板以折叠状态开始。它接受一组对象并生成一行按钮（每个对象一个按钮，按钮的文本是从对象中的一个属性中提取的）。这些按钮的右侧是“全部显示”按钮。这就是事情变得复杂的地方。我想根据按钮是否已包装到第二行（由于包含跨度的设置高度而最初隐藏）有条件地显示“全部显示”。如果某些按钮文本很长或者要生成的按钮列表很长，就会发生这种情况。这是目前通过执行以下操作：

模板

  <span #ButtonGroup>
    <button *ngFor="let but of AllButtons">{{but.Title}}</button>
  </span>
  <span id="see-all">See All ({{AllButtons?.length}})</span>

打字稿

constructor(private _renderer:Renderer2) { }

ngOnViewChecked():void {
   ...
   //By checking if the current height is greater than half the total height then we can be fairly certain that we only have 1 row
   if(this.ButtonGroup.nativeElement.clientHeight > (0.5 * this.ButtonGroup.nativeElement.scrollHeight)) {
       this._renderer.setAttribute(thing,"hidden","true");
   }
}

我的主要问题是这仅在第一次运行时才有效。如果用户更改了父对象（从而更改了应该生成的按钮），ngOnViewChecked 会在 ngFor 呈现新的一组按钮之前运行（尽管“Show All”跨度确实具有正确的更新长度呈现）。由于我依赖于 ButtonGroup 的 clientHeight/scrollHeight 有条件地显示“全部显示” - 在生命周期钩子运行时没有完成此渲染会导致相当多的麻烦。

我是否使用了错误的生命周期钩子？或者有没有更好的方法来解决这个问题，而不是依赖于渲染的大小？任何帮助将不胜感激。