mat-table 不会被来自 restservice 的数据填充

Question

我从我的 restservice 获得一个数组。这是有效的，我在页面上打印的响应的一些信息。但奇怪的是我无法填满我的垫子表，我不知道为什么。垫子表以前工作过，我只是没有以正确的方式将数据放入其中。我们将不胜感激。

table-paginator-component.ts:

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';
import {HttpService} from '../http.service';
import { HttpClient } from '@angular/common/http';
import {AreaCode} from '../models/areacode';


@Component({
  // tslint:disable-next-line: component-selector
  selector: 'table-paginator',
  styleUrls: ['table-paginator.component.css'],
  templateUrl: 'table-paginator.component.html',
})
export class TablePaginatorComponent implements OnInit {
  displayedColumns: string[] = ['standort', 'stammnummer', 'bereich'];


  products = [];


  dataSource = new MatTableDataSource<any>(this.products);

  constructor(private httpClient: HttpClient) {
    this.getAreaCodes();
  }

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

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

  getAreaCodes() {






  this.httpClient.get('http://localhost:8080/phonenumbersmanagement/api/v1/areacodes/all')
.subscribe((res: 
any[]) => {
      console.log(res);
      this.products = res;
    });
  }

}

table-paginator.component.html:

<!-- <button (click)="getAreaCodes2()">GET /productss</button> -->

<ul>
  <li *ngFor="let product of products" >
-- id: {{product.id}}
-- name: {{product.title}}
-- base: {{product.base}}
  </li>
</ul> 

<div class="mat-elevation-z8">


<table mat-table [dataSource]="dataSource">

  <!-- Position Column -->
  <ng-container matColumnDef="standort">
    <th mat-header-cell *matHeaderCellDef> Standort </th>
    <td mat-cell *matCellDef="let element"> {{element.title}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="stammnummer">
    <th mat-header-cell *matHeaderCellDef> Stammnummer </th>
    <td mat-cell *matCellDef="let element"> {{element.title}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="bereich">
    <th mat-header-cell *matHeaderCellDef> Bereich </th>
    <td mat-cell *matCellDef="let element"> {{element.title}} </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>

电流输出：

Answer 1

这件事对我有用。从角度/材料导入表并创建一个 它使用 viewchild 的实例。获取您的用户数据并在ngOnInit() 中设置displayedColumns，在ngAfterContentChecked() 中您需要创建MatTableDataSource 实例并将此实例设置为table.dataSource 在ngAfterViewInit() 中查看下方

import { MatTable, MatTableDataSource } from '@angular/material/table';

export class GetUserComponent implements OnInit {

@ViewChild(MatTable, {static:false}) table: MatTable<any>;
dataSource :any;


constructor(private appService:AppService){}

 ngOnInit() {
      this.appService.getUsers().subscribe(data => {
       this.userData= data;
      });
     this.displayedColumns = ['select','title','content'];
 }
 ngAfterViewInit() {

   this.table.dataSource = this.dataSource;
 }
 ngAfterContentChecked(){
    this.dataSource = new MatTableDataSource (this.userData);
  }
}

你可以在这里查看我的 stackblitz https://stackblitz.com/edit/angular-dynamicexamples

Answer 2

如下更改您的 getAreaCodes 方法，

getAreaCodes() {
  this.httpClient.get('http://localhost:8080/phonenumbersmanagement/api/v1/areacodes/all')
    .subscribe((res: any[]) => {
      this.products = res;
      this.dataSource = new MatTableDataSource(res);
    });
}

用长度更新你的 mat-paginator，就像属性绑定一样。

<mat-paginator [length]="products.length" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

Answer 3

我认为，当您从 api 接收数据并将结果值添加到 products 变量时，数据源变量不会更新。

尝试在 html 表格标签上使用 products 变量-> [dataSource]="products"

Answer 4

试试this.products = res; this.datasource.data = res;