Question

我正在使用Angular Material从远程JSON API创建表。我创建了一项服务，负责导入数据。

我有一个页面，该页面使用材料选项卡显示来自Twitter的数据的两个视图。每个选项卡的内容都包含在其自己的组件中。

因此，我正在关注许多有关分页的在线教程，但是我无法使其正常运行。 HTML组件显示，但完全不响应用户交互。我在做什么错了？

HTML文件

<mat-card>

  <!--Search input field to filter table data-->
  <div class="search-container">
    <mat-form-field>
      <input matInput placeholder="Search by hashtag">
    </mat-form-field>
  </div>

  <!--display loading spinner whilst data loads-->
  <div class="spinner-container" *ngIf="dataSource.loading$ | async">
    <mat-spinner></mat-spinner>
  </div>

  <!--Table populated by twitter hashtags API feed-->
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container matColumnDef="text">
      <th mat-header-cell *matHeaderCellDef> Tweet </th>
      <td mat-cell *matCellDef="let hashtags"> {{hashtags.text}} </td>
    </ng-container>
    <ng-container matColumnDef="likes">
      <th mat-header-cell *matHeaderCellDef> Likes </th>
      <td mat-cell *matCellDef="let hashtags"> {{hashtags.likes}} </td>
    </ng-container>
    <ng-container matColumnDef="replies">
      <th mat-header-cell *matHeaderCellDef> Replies </th>
      <td mat-cell *matCellDef="let hashtags"> {{hashtags.replies}} </td>
    </ng-container>
    <ng-container matColumnDef="retweets">
      <th mat-header-cell *matHeaderCellDef> Retweets </th>
      <td mat-cell *matCellDef="let hashtags"> {{hashtags.retweets}} </td>
    </ng-container>
    <ng-container matColumnDef="hashtags">
      <th mat-header-cell *matHeaderCellDef> Hashtags </th>
      <td mat-cell *matCellDef="let hashtags"> {{hashtags.hashtags}} </td>
    </ng-container>
    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef> Date </th>
      <td mat-cell *matCellDef="let hashtags"> {{hashtags.date}} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</mat-card>

<!--Table pagination-->
<mat-paginator
  [length]="length"
  [pageSize]="pageSize"
  [pageSizeOptions]="pageSizeOptions"
  [showFirstLastButtons]="yes"
  (page)="pageChanged($event)">
</mat-paginator>

TS文件

import { Component, ViewChild, OnInit } from '@angular/core';
import { TwitterdataService } from '../services/twitterdata.service';
import { Observable } from 'rxjs';
import { DataSource } from '@angular/cdk/collections';
import { Hashtags } from '../models/hashtags.model';
import { MatPaginator } from '@angular/material';
import { PageEvent } from '@angular/material';

@Component({
  selector: 'app-hashtag-tweets',
  templateUrl: './hashtag-tweets.component.html',
  styleUrls: ['./hashtag-tweets.component.sass']
})
export class HashtagTweetsComponent implements OnInit {
    dataSource = new UserDataSource(this.twitterdataService);
    displayedColumns = ['text', 'likes', 'replies', 'retweets', 'hashtags', 'date'];

    length = 50;
    pageSize = 5;
    pageSizeOptions = [5, 10, 20];

    @ViewChild(MatPaginator) paginator: MatPaginator;

    constructor(private twitterdataService: TwitterdataService) {
    }

    ngOnInit() {
    }

    ngAfterViewInit(): void {
        this.dataSource.paginator = this.paginator;
    }
}

    export class UserDataSource extends DataSource<any> {
    constructor( private twitterdataService: TwitterdataService ) {
        super();
    }
    connect(): Observable<Hashtags[]> {
        return this.twitterdataService.getTweetsByHashtag();
}
    disconnect() {}

}

我的PHPStorm IDE编辑器不断告诉我this.dataSource.paginator尚未解决，但我看不出这是什么意思。

为什么我的角材料分页不起作用？

0 个答案: