Angular*ngFor不加载图像并进入无限循环

我有一个从数据库加载产品数据的函数。 此数据将使用*ngFor加载到html中

上传数据后，我打算上传此产品ID的图像。也就是说，我尝试传递产品ID，并且我已经执行了获取图像的功能，使用我获取的ID

问题是*ngFor进入了一个连续循环，两个图像都没有加载：(

问题将出现在这一行，因为如果注释代码在没有任何无限循环的情况下运行（当然不是上载图像）：

HTML

<div class="container-fluid first" style="cursor: pointer;" data-toggle="modal" data-target="#modalPoll">
      <div class="row tab-pane Galeria">
        <div *ngFor="let product of products" class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
          <div class="image-item">
            <homeImage>
              <a class="d-block image-block h-100">
                <img *ngIf="inView" [src]="ImageInfo(product.id)"  class="Images img-fluid" alt="" (click)="fillModal($event)"> 
              </a>
            </homeImage>
            <div class="ImageText"> {{product.name}}</div>
          </div>
        </div>
      </div>
    </div>

{{product.name}

我会尝试一下。这可能不是答案，但如果我没有弄错的话，您的img源代码中有一个缺陷：

[src]=“ImageInfo（product.id）”

在这里，您的代码不会返回任何内容：

ImageInfo(id) {
      var self = this;
      self.Global.refreshToken().subscribe(function (result) {
        self.homeService.getImage(id).then(function (resultado) {
          if (resultado) {
             self.Imagenss = resultado;
          }
        }).catch();
      });
    }

因此没有来源。您只是将“imagenss”变量作为请求的结果

我无法测试，但您可能需要执行以下操作：

ImageInfo(id) {
      var self = this;
      self.Global.refreshToken().subscribe(function (result) {
        self.homeService.getImage(id).then(function (resultado) {
          if (resultado) {
             self.Imagenss = resultado;
             return self.Imagenss; // <---- HERE RETURNING WHAT I ASSUME TO BE THE PATH
          }
        }).catch();
      });
    }

ImageInfo（id）{
var self=这个；
self.Global.refreshtToken（）.subscribe（函数（结果）{
self.homeService.getImage（id）.then（函数（resultado）{
if（resultado）{
self.imagesnss=resultado；
return self.Imagenss；//我会尝试一下。这可能不是答案，但如果我没有弄错的话，您的img源代码中有一个缺陷：
[src]=“ImageInfo（product.id）”

在这里，您的代码不会返回任何内容：

ImageInfo(id) {
      var self = this;
      self.Global.refreshToken().subscribe(function (result) {
        self.homeService.getImage(id).then(function (resultado) {
          if (resultado) {
             self.Imagenss = resultado;
          }
        }).catch();
      });
    }

因此没有来源。您只是将“imagenss”变量作为请求的结果

我无法测试，但您可能需要执行以下操作：

ImageInfo(id) {
      var self = this;
      self.Global.refreshToken().subscribe(function (result) {
        self.homeService.getImage(id).then(function (resultado) {
          if (resultado) {
             self.Imagenss = resultado;
             return self.Imagenss; // <---- HERE RETURNING WHAT I ASSUME TO BE THE PATH
          }
        }).catch();
      });
    }

ImageInfo（id）{
var self=这个；
self.Global.refreshtToken（）.subscribe（函数（结果）{
self.homeService.getImage（id）.then（函数（resultado）{
if（resultado）{
self.imagesnss=resultado；
返回self.Imagenss；//从结构上讲，有些东西需要重新排序。请尝试从ngOnInit（）中的API获取所需的所有数据：

可能悬而未决的罪魁祸首是：

<img *ngIf="inView" [src]="ImageInfo(product.id)" class="Images img-fluid" alt="">



通过调用[src]内部的函数，每当数据更新时，此函数都将执行。由于后端触发数据刷新，因此它将再次调用该函数，等等

尝试以先获取所有数据的方式构造代码，并尝试将带有图像位置的字符串传递给[src]。这很可能会解决您的问题。
从结构上讲，某些内容需要重新排序。尝试从ngOnInit（）中的API获取所需的所有数据：

可能悬而未决的罪魁祸首是：

<img *ngIf="inView" [src]="ImageInfo(product.id)" class="Images img-fluid" alt="">



通过调用[src]内部的函数，每当数据更新时，此函数都将执行。由于后端触发数据刷新，因此它将再次调用该函数，等等

尝试以先获取所有数据的方式构造代码，并尝试将带有图像位置的字符串传递给[src]。这很可能会解决您的问题。
似乎最好更改获取图像的方法。与其在
ngFor
中获取图像，不如在初始化时获取所有图像并将其填充到模板中：

allImagesLoaded = false; // variable to show whether images are loaded
getImages(productIds) {
    // your aPI method that returns images. Result depends on your server i.e. base64 data, image url

    this.allImagesLoaded = true; 
}

然后渲染所有图像：

<ng-container *ngIf="allImagesLoaded ">
    <div *ngFor="let product of products" class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
      <div class="image-item">
        <homeImage>
          <a class="d-block image-block h-100">
            <img *ngIf="inView" [src]="ImageInfo(product.id)"  
                class="Images img-fluid" alt="" 
                (click)="fillModal($event)"> 
          </a>
        </homeImage>
        <div class="ImageText"> {{product.name}}</div>
      </div>
    </div>
 <ng-container>

似乎最好更改获取图像的方法。与其在
ngFor
中获取图像，不如在初始化时获取所有图像并将其填充到模板中：

allImagesLoaded = false; // variable to show whether images are loaded
getImages(productIds) {
    // your aPI method that returns images. Result depends on your server i.e. base64 data, image url

    this.allImagesLoaded = true; 
}

然后渲染所有图像：

<ng-container *ngIf="allImagesLoaded ">
    <div *ngFor="let product of products" class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
      <div class="image-item">
        <homeImage>
          <a class="d-block image-block h-100">
            <img *ngIf="inView" [src]="ImageInfo(product.id)"  
                class="Images img-fluid" alt="" 
                (click)="fillModal($event)"> 
          </a>
        </homeImage>
        <div class="ImageText"> {{product.name}}</div>
      </div>
    </div>
 <ng-container>

请发布你的组件类好吗？@RafiHenig我在帖子中添加了我的代码链接（stackblitz），在这里您可以找到我正在使用的所有内容您应该完全重新构造代码，在显示在模板中之前获取所有产品的所有产品和图像：@AJT82我认为这就是问题所在。我只使用homeImage模型在滚动时加载图像…我无法解决问题：（请编辑您的stackblitz链接能否发布您的组件类？@RafiHenig我将我的代码链接（stackblitz）放在了帖子中），在这里您可以找到我正在使用的所有内容您应该完全重新构造代码，在显示在模板中之前获取所有产品的所有产品和图像：@AJT82我认为这就是问题所在。我只使用homeImage模型在滚动时加载图像…我无法解决问题：（请编辑您的stackblitz链接我已经测试过了，但它不起作用，它仍然处于服务请求的无止境循环中：（我已经测试过，但它不起作用，它仍然处于服务请求的无止境循环中：（继续无限循环功能中的服务请求以获取图像：（继续无限循环函数中的服务请求以获取图像：（I get:context error在这一行@Harry你应该创建一个返回图像的API方法，然后应用上面的代码我在服务中创建了这个方法，它正在工作。我可能也误用了你的代码：（我更新了stackblitz链接，因为我没有放置homeImage组件…我可能有问题，因为：（我在这一行上得到：context error@Harry你应该创建一个返回图像的API方法，然后应用上面的代码我在服务中创建了这个方法，它正在工作。我可能也误用了你的代码：（我更新了stackblitz链接，因为我没有放置homeImage组件…我可能会因此出现问题：(