我正在尝试使用材料将分页添加到我的表格中。但是,我的分页器似乎不想连接到我的桌子,我不确定为什么。我已经定义了我的数据源,实现了必要的组件,并且我相信我的格式是正确的。我错过了什么?
我的数据源在此处被定义为预测,但在定义为“数据源”时它也不起作用,它只会使我的表数据完全消失。我假设我需要用我的 GET 方法来改变一些东西,但我不想在不必要的时候盲目地改变细节。
HTML
<table mat-table [dataSource]="forecasts" class="mat-elevation-z8 buttonSpace" width="1000px" align="center">
<ng-container matColumnDef="ID">
<th mat-header-cell *matHeaderCellDef width="200px">
<button mat-raised-button color="primary" [routerLinkActive]="['link-active']" [routerLink]="['/AddWeatherForecast']">
<mat-icon>
add
</mat-icon>
</button>
<button mat-raised-button color="accent" (click)="refreshWeatherForecastList()">
<mat-icon>
refresh
</mat-icon>
</button>
</th>
<td mat-cell *matCellDef="let forecast">
<button mat-raised-button color="primary" [routerLinkActive]="['link-active']" routerLink="/EditWeatherForecast/{{forecast.ID}}">
<mat-icon>
edit
</mat-icon>
</button>
<button mat-raised-button color="accent" (click)="deleteWeatherForecast(forecast)">
<mat-icon>
delete
</mat-icon>
</button>
</td>
</ng-container>
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef class="sizing"> Date </th>
<td mat-cell *matCellDef="let forecast"> {{forecast.Date}} </td>
</ng-container>
<ng-container matColumnDef="tempC">
<th mat-header-cell *matHeaderCellDef class="sizing"> Temperature (C.) </th>
<td mat-cell *matCellDef="let forecast"> {{forecast.TemperatureC}} </td>
</ng-container>
<ng-container matColumnDef="tempF">
<th mat-header-cell *matHeaderCellDef class="sizing"> Temperature (F.) </th>
<td mat-cell *matCellDef="let forecast"> {{forecast.TemperatureF}} </td>
</ng-container>
<ng-container matColumnDef="summary">
<th mat-header-cell *matHeaderCellDef class="sizing"> Summary </th>
<td mat-cell *matCellDef="let forecast"> {{forecast.Summary}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div
TS
import { MatPaginator } from '@angular/material/paginator';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatTableDataSource } from '@angular/material/table';
@Component({
selector: 'app-WeatherForecast',
templateUrl: './WeatherForecast.component.html'
})
export class WeatherForecastComponent implements OnInit, AfterViewInit
{
constructor(private service: WeatherForecast,) { }
forecasts: any = [];
ID = this.forecasts.ID;
displayedColumns: string[] = ['ID','date', 'tempC', 'tempF', 'summary'];
dataSource = new MatTableDataSource<any>(this.forecasts);
@ViewChild(MatPaginator) paginator: MatPaginator;
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
ngOnInit()
{
this.refreshWeatherForecastList();
}
refreshWeatherForecastList()
{
this.service.list().subscribe(data =>
{
this.forecasts = data;
});
}
答案 0 :(得分:0)
分页器仅适用于数据源 MAtDataSource:您的 .html [dataSource]="forecasts"
您需要在 .html 中使用
<table mat-table [dataSource]="datasource"..>
</table>
并更改您的函数“refreshWeatherForecastList”
refreshWeatherForecastList()
{
this.service.list().subscribe(data =>
{
this.dataSource = new MatTableDataSource<any>(data);
this.dataSource.paginator = this.paginator;
});
}
(记住每次更改dataSource时,都需要指定“分页器”)