0

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

 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 中，我手动运行更改检测。之后，如果我进行控制台日志记录，我将获取节点列表，其中所有项目都具有正确的宽度。但是如果我尝试遍历节点列表以获取totalwidth 我得到不同的值。在每张卡片中，我当前显示一个图像和一个文本。我没有将卡片的宽度设置为固定值，我将图像的高度设置为固定值应用与该高度相对应的宽度，所以图像会响应。所以我在节点列表上的循环给了我错误的宽度值，直到图像是从内存缓存中加载的。所以我的猜测是加载图像需要一定的时间，我的卡的宽度取决于图像宽度，这就是为什么如果我尝试遍历节点列表，我会得到错误的宽度值。但是，为什么节点列表中的宽度值是正确的，以及为什么我尝试遍历它们时它会改变？我应该如何解决这个问题，以便在我的组件在不使用的情况下加载后立即根据每个卡的宽度获得总宽度setTimeOut().

这是演示 stackblitz 代码 - https://stackblitz.com/edit/angular-ivy-czs5mo?file=src/app/app.component.ts

4

1 回答 1

0

您需要检查，在您的图像中事件(load)。有些喜欢

<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..
   }
}

注意：改为使用

//I don't like so much
this.elem.nativeElement.querySelectorAll('.card');

您可以#card在 .html 中使用 referenceVariable 并使用 ViewChildren 控制元素

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

并使用

this.cards.forEach(x=>{
   const rect=x.nativeElement.getBoundingClientRect()
   console.log(rect)
   ...
})
于 2020-10-02T07:03:45.550 回答