在 Observable 数组中嵌套 *ngFor答案

【问题标题】：Nested *ngFor in Observable Array在 Observable 数组中嵌套 *ngFor
【发布时间】：2019-03-28 17:06:02
【问题描述】：

我正在尝试在我的 HTML 中使用 Angular 6 绑定一个嵌套的可观察数组，并在我的轮播中显示列表（image_urls）。但是，我无法绑定嵌套数组。非常感谢任何帮助或建议。提前致谢

这是我目前所拥有的：

组件.ts

getAvailableCars()
{
    this.cars$ = this.carService.getAvailableCars();
         this.cars$.subscribe(car => {
            car.forEach(c => {
             c.image_urls = new Array<any>(); 
                this.fileUploads = this.uploadFileService.getFiles(c.car_id);
                this.fileUploads.subscribe(res => {
                 c.image_urls = res;
             });
        });
    });
   }

HTML

<div class="row" *ngFor="let car of cars$ | async”>
    <span>{{car.name}}</span>

    <mdb-carousel [isControls]="true" [animation]="'slide'”> 
        <mdb-slide *ngFor="let file of car.image_urls | async”> 
            <span>{{file.url}}</span>
        </mdb-slide>
     </mdb-carousel>
</div>

控制台

Car(3) [{…}, {…}, {…}]
0:
car_id: 30
exterior_color: 4
fuel_type_name: "Petrol"
image_urls: Array(2)
0: FileUpload {url: "https://s3.amazonaws.com/xx/30/SocialPost_5695408_facebook.png"}
1: FileUpload {url: "https://s3.amazonaws.com/xx/30/logo_size.jpg"}
length: 2
__proto__: Array(0)

如果我直接在 Carousel 中使用 this.fileUploads，它可以工作，但当我将它推送到 c.image_urls 时就不行。因为，我有多辆汽车，每辆都有不同的图片 url，我需要将 image_urls 添加到汽车的对象中。

再次感谢！

【问题讨论】：

云是安全问题吗？看看bypassSecurityTrustUrlangular.io/guide/security#bypass-security-apis
嗯...可能不会。如果我直接在我的 *ngFor 中使用“this.fileUploads”，它运行良好。我假设，如果存在安全问题，这也不起作用？

标签： html angular typescript observable

【解决方案1】：

我让它工作了。我在 subscribe 而不是在 map 中修改 observable。

【讨论】：