图片src与角料分页程序垫卡效率不高(Image src not efficient with An

2019-10-29 16:45发布

我所试图做的是加载( ngOnInit()一个src图像到垫卡,但它一直显示相同的(在我的情况是第一个)图像,每当我与分页程序过滤。

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>

打字稿

    @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;
  }
文章来源: Image src not efficient with Angular Material Paginator Mat-Card