Angular Material 表的问题 - 分页和排序

Posted 2023-02-22

【中文标题】Angular Material 表的问题 - 分页和排序

【英文标题】：Problem with Angular Material table - pagination and sort

【发布时间】：2020-11-17 01:43:38

【问题描述】：

我使用 api tvmaze.com 在 Angular 中创建搜索电视连续剧应用程序。 我想在 Angular Material 表中显示结果搜索器，但分页和排序不起作用。

这是我的服务：

 public getSerials(data: string): Observable<any> 
    return this.httpClient.get(`$this.baseUrl/search/shows?q=$data`);
  

这是我的组件：

@Component(
  selector: 'app-serials',
  templateUrl: './serials.component.html',
  styleUrls: ['./serials.component.scss'],
)
export class SerialsComponent implements OnInit 
  public inputValue: string = '';
  public dataRequest = [];
  public ready = false;
  public displayedColumns = ['id', 'name', 'genres', 'premiered', 'rating'];
  public dataSource: MatTableDataSource<any>;

  @ViewChild(MatSort,  static: true ) sort: MatSort;
  @ViewChild(MatPaginator,  static: true ) paginator: MatPaginator;

  constructor(private req: RequestService) 

  ngOnInit() 
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  

  searchSerials() 
    if (this.inputValue === '') return;

    this.dataRequest = [];
    this.req.getSerials(this.inputValue).subscribe((serials) => 
      serials.forEach((serial) => 
        this.dataRequest.push(serial);
        this.dataSource = new MatTableDataSource(this.dataRequest);
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
      );
    );
    this.ready = true;
  

这是我的看法。

<div class="serials">
  <div class="serials__row">
    <h1>Search for a tv serial</h1>
  </div>
  <div class="serials__row">
    <div class="serials__input">
      <mat-form-field class="example-form-field">
        <mat-label>The name of the series</mat-label>
        <input matInput type="text" [(ngModel)]="inputValue" />
      </mat-form-field>
    </div>
    <div class="serials__button">
      <button mat-raised-button color="primary" (click)="searchSerials()">
        Search
      </button>
    </div>
  </div>
  <ng-container *ngIf="ready">
    <div class="serials__table">
      <mat-table [dataSource]="dataSource" matSort>
        <ng-container matColumnDef="id">
          <mat-header-cell *matHeaderCellDef mat-sort-header>
            ID
          </mat-header-cell>
          <mat-cell *matCellDef="let row">  row.show.id  </mat-cell>
        </ng-container>

        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef mat-sort-header>
            TITLE
          </mat-header-cell>
          <mat-cell *matCellDef="let row">  row.show.name  </mat-cell>
        </ng-container>

        <ng-container matColumnDef="genres">
          <mat-header-cell *matHeaderCellDef>
            GENRES
          </mat-header-cell>
          <mat-cell *matCellDef="let row">
            <ul>
              <li *ngFor="let genre of row.show.genres"> genre </li>
            </ul>
          </mat-cell>
        </ng-container>

        <ng-container matColumnDef="premiered">
          <mat-header-cell *matHeaderCellDef mat-sort-header>
            PREMIERE DATE
          </mat-header-cell>
          <!-- <mat-cell *matCellDef="let row" [style.color]="row.color"> -->
          <mat-cell *matCellDef="let row">
             row.show.premiered | date: "dd/MM/yyyy" 
          </mat-cell>
        </ng-container>

        <ng-container matColumnDef="rating">
          <mat-header-cell *matHeaderCellDef mat-sort-header>
            RATING
          </mat-header-cell>
          <mat-cell *matCellDef="let row">
             row.show.rating.average 
          </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"> </mat-row>
      </mat-table>

      <mat-paginator [pageSizeOptions]="[5, 10, 25]"></mat-paginator>
    </div>
  </ng-container>
</div>

我阅读了很多类似问题的解决方案，但没有适合我的解决方案，因为我想在从请求中获取数据时使用分页器和排序，而我不能使用 ngOnInit 或 ngAfterViewInit。 另外，我会说所有导入都是正确的。

【问题讨论】：

表格显示的数据？

我不知道，你的意思是？

【参考方案1】：

将分页器代码移到 *ngif 块之外。还要根据记录数正确设置mat paginator的长度。

【讨论】：

谢谢，分页解决了我的问题，但排序仍然不起作用。