我所试图做的是加载( 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;
}