Question

我使用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。另外，我会说所有进口都是正确的。

Answer 1

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

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

1 个答案: