我試圖設置這些容器的寬度，但是我還需要觀察@Input的變化，因為DOM會根據@Input發生變化

@Input('connections') public connections = [];

@ViewChildren('containers', { read: ElementRef }) chipContainers: QueryList<ElementRef>;

這個@Input的值可以改變，所以我需要使用ngOnChanges

public ngOnChanges() {
    if (this.connections) {
      const containerArr = this.containers.toArray();

      if (containerArr.length) {
        containerArr.forEach((container) => {
          const child = container.nativeElement.children;

          if (child.length) {
            const baseWidth = child[0].clientWidth + 100; // omitted calc to find baseWidth

            container.nativeElement.style.width = `${baseWidth}px`;
          }
        });
      }
    }
  }

似乎在設置container . native element . style . width后，更改沒有正確呈現，因為我可以在console.log它時看到新的寬度值。

嘗試了this . renderer . set style(chip container . native element，' width '，` $ { base width } px `)； 但由于某種原因，這也不起作用

一個可能的解決方案是使用AfterViewInit生命周期掛鉤而不是ngOnChanges，以確保在試圖修改容器的寬度之前完全呈現DOM。