Javascript 在ngAfterViewInit生命周期中，dom的钩子映像是否完全加载？

因此，在我当前的项目中，我尝试创建一个产品滑块。为了正确工作，我需要获得所有产品的宽度，以便计算总宽度。目前我正在做的是

 ngAfterViewInit(): void {
    this.service.getData().subscribe((items) => {
      for (let key in items) {
        this.items.push(items[key]);
      }
      this.cd.detectChanges();
      this.cards = this.elem.nativeElement.querySelectorAll('.card');
      console.log(this.cards); // In this log i am getting all the cards have the correct width
      this.cards.forEach((card) => {
        console.log(card.getBoundingClientRect());//But in this log widths are different
        this.totalWidth += card.clientWidth;
      });
      console.log(this.totalWidth);
    });
  }

在ngAfterViewInit中，在调用后端并将其设置为laocal变量后，我手动运行更改检测。之后，如果我在控制台日志记录，我将获得节点列表，其中所有项的宽度都正确。但是如果我尝试循环节点列表以获得总宽度，我将获得不同的值。在每个卡中，我当前使用的是显示一个图像和一个文本。我没有将卡的宽度设置为固定值，我正在将图像的高度设置为与该高度对应的固定值apply width，以便图像能够响应。因此，在图像从内存缓存加载之前，我在节点列表上的循环给了我错误的宽度值。因此，我猜测加载图像需要一定的时间，而我的卡的宽度取决于图像的宽度，这就是我为什么要这样做的原因如果我尝试在节点列表上循环，我会得到错误的宽度值。但是，为什么在节点列表中宽度值是正确的，为什么在我尝试在它们上循环时宽度值会改变？我应该如何解决这个问题，以便在不使用

setTimeOut（）

的情况下，在我的组件加载后立即获得基于每个卡宽度的总宽度

---

这是演示stackblitz代码-

您需要检查，在您的图像中，事件

（加载）

。有些人喜欢

<img src="https://picsum.photos/200/300" (load)="onLoad()"/>

count:number=0;
yet:boolean=false;
onLoad()
{
   count++;
   this.checkWidth()
}

ngAfterViewInit()
{
    this.yet=true;
    this.checkWidth()
}
this.checkWidth()
{
   if (this.yet && count==imagesLength)
   {
       ..do something..
   }
}

您可以在.html中使用referenceVariable

#card

，并控制元素使用ViewChildren

@ViewChildren('card') cards:QueryList<ElementRef>

---

为什么要调用console.log（card.getBoundingClientRect（）），但要用clientWidth测量总宽度？这些通常是不同的值7如果我用offsetwidth测量，值是不同的。但是当图像加载到内存缓存中或稍后在任何函数中，我调用相同的步骤时，两个值都是相同的。我试图通过测量每个卡的宽度来获得总宽度。所以你是说你需要知道如何等待图像加载以检查？首先，我想知道是否发生了这种行为，因为图像加载需要时间，因为节点列表中的每个卡宽度都有不同的宽度（console.log（this.cards）），如果我尝试循环节点列表并访问每个卡宽度，则下一行的值完全不同。我不想使用setTimeOut（），因为在我们得到正确的宽度值之前，我们永远不知道需要多少时间。

@ViewChildren('card') cards:QueryList<ElementRef>

this.cards.forEach(x=>{
   const rect=x.nativeElement.getBoundingClientRect()
   console.log(rect)
   ...
})