Angular material 显示第0页（共0页）的角材料材质标注器

很抱歉提前问了这个问题。在写这篇文章之前，我在谷歌上搜索了我的问题，并尝试了很多解决方案，但运气不佳。 我是一个有棱角的傻瓜，想学习材料。 我的简单项目发出一个http请求，并使用收到的JSON填充一个表。 角度材质表工作正常，但分页器工作不正常。 它呈灰色，显示第0页，共0页

component.html如下所示：

<div style="height: 80vh;">
  <mat-toolbar color="primary">
    <mat-toolbar-row>
      <button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
        <mat-icon>menu</mat-icon>
      </button>
      <span>Teste - Requisição Http/Tabela</span>
      <span class="menu-spacer"></span>
    </mat-toolbar-row>
  </mat-toolbar>

  <mat-sidenav-container fxFlexFill>
    <mat-sidenav #sidenav>
      <mat-nav-list>
        <a (click)="sidenav.toggle()" mat-list-item>Fechar</a>
        <a href="#" mat-list-item>Link 1</a>
        <a href="#" mat-list-item>Link 2</a>
        <a href="#" mat-list-item>Link 3</a>
      </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content fxFlexFill>
      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef> Id </th>
          <td mat-cell *matCellDef="let element"> {{element.id}} </td>
        </ng-container>

        <ng-container matColumnDef="email">
          <th mat-header-cell *matHeaderCellDef> Email </th>
          <td mat-cell *matCellDef="let element"> {{element.email}} </td>
        </ng-container>

        <ng-container matColumnDef="first_name">
          <th mat-header-cell *matHeaderCellDef> First Name </th>
          <td mat-cell *matCellDef="let element"> {{element.first_name}} </td>
        </ng-container>

        <ng-container matColumnDef="last_name">
          <th mat-header-cell *matHeaderCellDef> Last Name </th>
          <td mat-cell *matCellDef="let element"> {{element.last_name}} </td>
        </ng-container>

        <ng-container matColumnDef="avatar">
          <th mat-header-cell *matHeaderCellDef> Avatar </th>
          <td mat-cell *matCellDef="let element"> {{element.avatar}} </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, 25, 100]" showFirstLastButtons></mat-paginator>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

import { HttpClient } from '@angular/common/http';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';

export interface UserData {
  id: number;
  email: string;
  first_name: string;
  last_name: string;
  avatar: string;
}

const USER_DATA: UserData[] = [];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'Test';
  url = 'https://reqres.in/api/users?page=1';
  displayedColumns: string[] = ['id', 'email', 'first_name', 'last_name', 'avatar'];
  dataSource = new MatTableDataSource<UserData>(USER_DATA);
 
  constructor(private http: HttpClient) {
  
    this.http.get(this.url).toPromise().then(data => {
      console.log(data["data"]);
      this.dataSource = data["data"]
      console.log(this.dataSource)
    });
  }

  @ViewChild(MatPaginator) paginator: MatPaginator;

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

菜单
Teste-Requisiço Http/Tabela
身份证件
{{element.id}
电子邮件
{{element.email}
名字
{{element.first_name}
姓
{{element.last_name}
阿凡达
{{element.avatar}}

组件1.ts如下所示：

<div style="height: 80vh;">
  <mat-toolbar color="primary">
    <mat-toolbar-row>
      <button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
        <mat-icon>menu</mat-icon>
      </button>
      <span>Teste - Requisição Http/Tabela</span>
      <span class="menu-spacer"></span>
    </mat-toolbar-row>
  </mat-toolbar>

  <mat-sidenav-container fxFlexFill>
    <mat-sidenav #sidenav>
      <mat-nav-list>
        <a (click)="sidenav.toggle()" mat-list-item>Fechar</a>
        <a href="#" mat-list-item>Link 1</a>
        <a href="#" mat-list-item>Link 2</a>
        <a href="#" mat-list-item>Link 3</a>
      </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content fxFlexFill>
      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef> Id </th>
          <td mat-cell *matCellDef="let element"> {{element.id}} </td>
        </ng-container>

        <ng-container matColumnDef="email">
          <th mat-header-cell *matHeaderCellDef> Email </th>
          <td mat-cell *matCellDef="let element"> {{element.email}} </td>
        </ng-container>

        <ng-container matColumnDef="first_name">
          <th mat-header-cell *matHeaderCellDef> First Name </th>
          <td mat-cell *matCellDef="let element"> {{element.first_name}} </td>
        </ng-container>

        <ng-container matColumnDef="last_name">
          <th mat-header-cell *matHeaderCellDef> Last Name </th>
          <td mat-cell *matCellDef="let element"> {{element.last_name}} </td>
        </ng-container>

        <ng-container matColumnDef="avatar">
          <th mat-header-cell *matHeaderCellDef> Avatar </th>
          <td mat-cell *matCellDef="let element"> {{element.avatar}} </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, 25, 100]" showFirstLastButtons></mat-paginator>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

import { HttpClient } from '@angular/common/http';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';

export interface UserData {
  id: number;
  email: string;
  first_name: string;
  last_name: string;
  avatar: string;
}

const USER_DATA: UserData[] = [];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'Test';
  url = 'https://reqres.in/api/users?page=1';
  displayedColumns: string[] = ['id', 'email', 'first_name', 'last_name', 'avatar'];
  dataSource = new MatTableDataSource<UserData>(USER_DATA);
 
  constructor(private http: HttpClient) {
  
    this.http.get(this.url).toPromise().then(data => {
      console.log(data["data"]);
      this.dataSource = data["data"]
      console.log(this.dataSource)
    });
  }

  @ViewChild(MatPaginator) paginator: MatPaginator;

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

从'@angular/common/http'导入{HttpClient}；
从“@angular/core”导入{AfterViewInit，Component，ViewChild}；
从'@angular/material/paginator'导入{MatPaginator}；
从“@angular/material/table”导入{MatTableDataSource}；
导出接口用户数据{
id：编号；
电子邮件：字符串；
第一个名称：字符串；
姓氏：字符串；
化身：字符串；
}
const USER_DATA:UserData[]=[]；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现AfterViewInit{
标题=‘测试’；
url='1〕https://reqres.in/api/users?page=1';
displayedColumns:string[]=['id'，'email'，'first_name'，'last_name'，'avatar']；
数据源=新MatTableDataSource（用户数据）；
构造函数（专用http:HttpClient）{
this.http.get（this.url）.toPromise（）.then（data=>{
console.log（数据[“数据”]）；
this.dataSource=data[“data”]
console.log（this.dataSource）
});
}
@ViewChild（MatPaginator）分页器：MatPaginator；
ngAfterViewInit（）{
this.dataSource.paginator=this.paginator；
}
}

我做错了什么？

---

感谢

在angular的文档中，他们忘了添加，您需要定义{static:false}或{static:true}

像这样：

@ViewChild(MatPaginator, {static:false}) paginator: MatPaginator;

在文档中：

static-True用于在运行更改检测之前解析查询结果， 在检测到更改后解决错误。默认为false

如果要使用默认设置，则需要将其设置为false。

尝试在中添加#paginator

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>

应该是：

<mat-paginator #paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>

没有id“#paginator”@ViewChild装饰器将永远无法找到元素（此id必须与@ViewChild装饰器行中使用的id相同）。 这个小细节没有包含在Angle Material文档中的分页示例中（或者我看不到它…）

除此之外，请尝试将数据源对象声明为：

dataSource！=MatTableDataSource

而不是

dataSource=新MatTableDataSource（用户数据）

然后，当承诺得到解决时，以这种方式分配内容

this.dataSource=新的MatTableDataSource（data.data）

而不是

this.dataSource=data[“data”]

紧接着，将paginator组件分配给dataSource.paginator：

this.dataSource.paginator=this.paginator
尝试删除
后视图
，并用以下代码替换
视图子视图
：

@ViewChild(MatPaginator) set matPaginator(paginator: MatPaginator) {
    this.dataSource.paginator = paginator;
}

感谢您的快速Becike，但不幸的是它仍然不起作用。分页器仍然显示第0页，共0页，如果尝试将和放入div中？值得一试。。。Mat table有时可能会很棘手…将它们放入div中也不太可能=（我还有一个想法：在获得承诺中的数据后尝试应用分页器。顺便说一句，我通常在从observable（httpClient）获得响应时创建新的MatTableDataSource），并立即添加PaginAuthoried，但仍然不起作用。无论如何，谢谢我更新了答案您的意思是删除
implements AfterViewInit
和
ngAfterViewInit（）{this.dataSource.paginator=this.paginator；}
？是的，不实现AfterViewInit并删除ngAfterViewInit（）{…}然后用我建议的代码替换这个：@ViewChild（MatPaginator）paginator:MatPaginator。