这个问题可能是由于Angular 7中的循环中使用了S3键来显示产品图像造成的。以下是一个解决方法的代码示例:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
private getS3KeyMap(): Observable {
return this.http.get('http://your-api-url/s3-key-map');
}
ngOnInit
方法中调用getS3KeyMap
方法,并将其结果存储在一个变量中:ngOnInit() {
this.getS3KeyMap().subscribe((result) => {
this.s3KeyMap = result; // 存储S3键和图片URL的映射关系
});
}
ngFor
循环来显示产品图像,并使用[src]
绑定S3键对应的图片URL:
在这个示例中,我们通过调用getS3KeyMap
方法从API获取S3键和图片URL的映射关系,并将其存储在s3KeyMap
变量中。然后,在HTML模板中使用ngFor
循环遍历产品数组,并使用[src]
绑定每个产品的S3键对应的图片URL。这样就可以在循环中正确显示产品图像了。请注意,你需要将http://your-api-url/s3-key-map
替换为你实际的API端点。