在可观察数组中嵌套* ngFor

Question

I am trying to bind a nested observable array using Angular 6 in my HTML and show the list(image_urls) in my carousel. However, I am unable to bind the nested array. Any help or advice is much appreciated. Thanks in advance

This is what I have so far:

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

Console

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) 

If i use this.fileUploads directly in the Carousel it works, but not when i push it to c.image_urls. Since, I have multiple cars and each have different image urls, I need to add the image_urls to the object of car.

Thanks again!

Answer 1

I got it working. I was modifying the observable in subscribe instead of in map.