角材料分页/打字稿答案

【问题标题】：Angular Material Pagination / Typescript角材料分页/打字稿
【发布时间】：2021-09-17 08:49:46
【问题描述】：

我正在尝试用材料将分页添加到我的表格中。但是，我的分页器似乎不想连接到我的表，我不知道为什么。我已经定义了我的数据源，实现了必要的组件，并且我相信我的格式是正确的。我错过了什么？

我的数据源在这里被定义为预测，但当定义为“数据源”时它也不起作用，它只会让我的表数据完全消失。我假设我需要用我的 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

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;
    });
  }

【问题讨论】：

标签： angular typescript pagination angular-material

【解决方案1】：

分页器仅适用于数据源 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;
    });
  }

（记住每次更改数据源时，都需要指定“分页器”）

【讨论】：