没有（点击）功能的角度加载图像

Question

我正在使用 * ngFor 从 html 中的图像加载数据。

为了加载图片，需要执行另一个函数，该函数需要在 * ngFor 中加载的 ID，以查找具有该 ID 的图片。

为了获取图片，我在传递产品 ID 的地方使用了（点击），但目标是在不使用点击的情况下加载图片，即自动加载。

我有什么

HTML

 <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" (click)="fillModal($event, product)">
              <a class="d-block image-block h-100">
              <homeImage> 
                    <img *ngIf [src]="Images" class="Images img-fluid" alt="">                  
              </homeImage> 
              </a>           
            <div class="ImageText" (click)="ImageInfo(product.id)">{{product.name}}</div>
          </div>
        </div>
      </div>

Component.ts

ngOnInit() {
    this.GetProducts();
  }

  GetProducts() {
    let self = this;
    this.Global.refreshToken().subscribe(function (result) {
      self.homeService.getProducts().then(function (resultado) {
        if (resultado) {
         self.products = resultado;
        }
      }).catch();
    }); 
  }


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

Service.ts

getProducts(): Promise<any> {
    let self = this;
    let urlAux = self.url + "/Products/GetProducts";
    return axios.get(urlAux, {
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem("access_token")
      }
    })
      .then(this.extraData)
      .catch(this.handleErroPromisse);
  }

  getImage(id): Promise<any> {
    let self = this;
    let urlAux = self.url + "/Products/GetImage/" + id;

    return axios.get(urlAux, {'responseType': 'arraybuffer'})
      .then((response) => {
        let image = btoa(
          new Uint8Array(response.data)
            .reduce((data, byte) => data + String.fromCharCode(byte), '')
        );
        return `data:${response.headers['content-type'].toLowerCase()};base64,${image}`;
      });
  }

我测试过但没用的：

在 src 中执行函数不起作用:(

 <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" (click)="fillModal($event, product)">
              <a class="d-block image-block h-100">
              <homeImage> 
                    <img *ngIf [src]="ImageInfo(product.id)" class="Images img-fluid" alt="">                  
              </homeImage> 
              </a>           
            <div class="ImageText">{{product.name}}</div>
          </div>
        </div>
      </div>

Answer 1

您正在执行的操作是异步的（它返回一个 Promise）。

这就是为什么您需要确保将属性标记为等待异步操作，或者使操作“不那么异步”:-)。

预先进行处理

如果您立即解析打字稿中的图像，您可以跳过函数的异步部分并在 component.ts 文件中执行相同的操作。

组件.ts

ngOnInit() {
  this.GetProducts();
}

GetProducts() {
  let self = this;
  this.Global.refreshToken()
    .subscribe(function (result) {
      self.homeService.getProducts()
        .then(function (resultado) {
          if (resultado) {
            self.products = resultado;
          }
        })
        .then(() => {
          if (self.products) {
            return Promise.all(self.products.map((product) => self.ImageInfo(product.id)));
          }
        })
        .catch((err) => console.error(err));
    });
}


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

        self.images[id] = resultado; // <-- changed to id so you can fetch easily
      }
    }).catch();
  });
}

HTML

 <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" (click)="fillModal($event, product)">
        <a class="d-block image-block h-100">
        <homeImage> 
              <img *ngIf="images[product.id]" [src]="images[product.id]" class="Images img-fluid" alt="">                  
        </homeImage> 
        </a>           
      <div class="ImageText">{{product.name}}</div>
    </div>
  </div>
</div>

现在，如果我们在获取产品时已经获取了数据，我只是显示图像。这样，异步操作发生在 component.ts 中，HTML 保持同步。

这两种解决方案的主要区别在于是否要使用prefetching。

Answer 2

它不起作用，因为您的 ImageInfo(id) 没有返回任何可以分配给 img src 的内容。它加载图像信息并将结果存储到this.Images。但是在模板中，你将函数的返回值绑定到src。

您可能想要做的是在 ngOnInit 中加载所有产品，然后为所有产品加载所有 ImageInfos（假设您的 API 是这样工作的......）

类似：

async ngOnInit() {
    this.products = await this.service.loadProducts();
    for (const p of this.product) {
       this.images[p.id] = await this.imageService.getInfo(p.id));
    }
}

和

<div *ngFor="let product of products">
  <img *ngIf="images[product.id]" [src]="images[product.id].src" > 
</div>