Image src not efficient with Angular Material Paginator Mat-Card

问题

What I am trying to do is to load (ngOnInit()) a src image onto a Mat-Card, but it keeps showing the same (the first one in my case) image whenever I filter with the Paginator.

HTML

<mat-paginator #MatPaginator [length]='3' [pageSizeOptions]="[1,2,5,10,20]"></mat-paginator>
    <div *ngFor="let a of obs|async; let i =index;">
        <mat-card class="example-card">
          <mat-card-header>
            <mat-card-title>{{a.vehicleMake}} | {{a.vehicleModel}} ({{a.vehicleYear}}) -- R{{a.sellingPrice}}
            </mat-card-title>
            <mat-card-subtitle>{{a.location}}</mat-card-subtitle>
          </mat-card-header>
          <img mat-card-image src="{{imageToLoad[i].url}}" alt="Photo unavailable" (ngModelChange)="formatField($event)">
          <mat-card-actions>
            <mat-card-subtitle>{{a.advertDescription}}</mat-card-subtitle>
            <button mat-button (click)='ViewAdvert(a.advertID)'>View</button>
          </mat-card-actions>
        </mat-card>
      </div>

Typescript

    @ViewChild(MatPaginator,{static:false}) paginator: MatPaginator;

      public apiURL = environment.api; 
      public isImageLoading:any;
      public adverts:any=[];
      public imageToLoad:any=[];
      public obs: Observable<any>;
      public dataSource:MatTableDataSource<Card>;
      public selected;
      public advertID:any;
    constructor(private cd: ChangeDetectorRef,private advertIDService:SendAdvertIDService, private popup:MatDialog,private http:HttpClient,private lservice:LoginService, private snack:MatSnackBar,private registeredUserService:RegisteredUserService) {}
        ngOnInit() {
            this.registeredUserService.GetAllAdverts().subscribe(val=>
              {
                this.dataSource = new MatTableDataSource<Card>(val);
                this.dataSource.paginator = this.paginator;
                this.obs = this.dataSource.connect();
                let numOfAds=0;
                for(let a of val)
                {
                 this.imageToLoad[numOfAds]={url:this.apiURL+'/api/Images/'+a.advertID+'_1'};

                  numOfAds++;
                }
              },error => this.snack.open("Something went wrong. Please try again later")._dismissAfter(5000));   
          }
formatField(e:any)
  {
    this.imageToLoad[0] = e;
    this.cd.detectChanges();
    this.imageToLoad[0] = e;
  }

来源：https://stackoverflow.com/questions/58356013/image-src-not-efficient-with-angular-material-paginator-mat-card