css 无法在ngOnChanges中设置nativeElement.style.width

nlejzf6q  于 2023-06-07  发布在  Go
关注(0)|答案(1)|浏览(163)

我正在尝试设置这些容器的宽度,但我还需要注意@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.nativeElement.style.width之后,更改没有正确呈现,因为我可以在console.log时看到新的宽度值。
尝试了this.renderer.setStyle(chipContainer.nativeElement, 'width',${baseWidth}px);,但由于某种原因也不起作用

7xzttuei

7xzttuei1#

一个可能的解决方案是使用AfterViewInit生命周期钩子而不是ngOnChanges,以确保在尝试修改容器的宽度之前完全呈现DOM。

相关问题