Question

我想通过Angular材料设计的数据表mat-table显示一个列表。这是我的组成部分：

import { LeaveapplicationService } from './../../services/leaveapplication.service';
import { leaveapplication } from './../../models/leaveapplication';
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
// import { DataSource } from '@angular/cdk/table';

@Component({
  selector: 'app-leaveapplication-list',
  templateUrl: './leaveapplication-list.component.html',
  styleUrls: ['./leaveapplication-list.component.scss']
})
export class LeaveapplicationListComponent implements OnInit {
  leaveApplications: leaveapplication[];
  displayedColumns: ['id', 'applicant', 'manager', 'leavetype', 'start', 'end', 'return', 'status'];
  dataSource: MatTableDataSource<leaveapplication>;

  constructor(private leaveApplicationService: LeaveapplicationService) { }

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    this.leaveApplicationService.getLeaveApplications().subscribe(leaveapplications => {
      this.leaveApplications = leaveapplications;
      this.dataSource = new MatTableDataSource<leaveapplication>(this.leaveApplications);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      console.log(this.dataSource);
    });

  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }
}

请假申请界面：

export interface leaveapplication {
  id: number; 
  applicant: string;
  manager: string;
  startdate: Date;
  enddate: Date;
  returndate: Date;
  leavetype: string; 
  status: string;
}

我在控制台中正确获取dataSource：

但mat-table返回空单元格：

这是我的模板：

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<mat-table #table [dataSource]="dataSource" matSort class="mat-elevation-z8">
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Form ID </th>
    <td mat-cell *matCellDef="let leaveapplication"> {{leaveapplication.id}} </td>
  </ng-container>
  <ng-container matColumnDef="applicant">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Applicant </th>
    <td mat-cell *matCellDef="let leaveapplication"> {{leaveapplication.applicant}} </td>
  </ng-container>

  <ng-container matColumnDef="manager">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Manager </th>
    <td mat-cell *matCellDef="let leaveapplication"> {{leaveapplication.manager}} </td>
  </ng-container>

  <ng-container matColumnDef="leavetype">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Leave Type </th>
    <td mat-cell *matCellDef="let leaveapplication"> {{leaveapplication.leaveType}} </td>
  </ng-container>
  <ng-container matColumnDef="start">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Start Date </th>
    <td mat-cell *matCellDef="let leaveapplication"> {{leaveapplication.startDate | date:'dd-MM-yyyy'}} </td>
  </ng-container>
  <ng-container matColumnDef="end">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> End Date </th>
    <td mat-cell *matCellDef="let leaveapplication"> {{leaveapplication.endDate | date:'dd-MM-yyyy'}} </td>
  </ng-container>
  <ng-container matColumnDef="return">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Return Date </th>
    <td mat-cell *matCellDef="let leaveapplication"> {{leaveapplication.returnDate | date:'dd-MM-yyyy'}} </td>
  </ng-container>
  <ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
    <td mat-cell *matCellDef="let leaveapplication"> {{leaveapplication.status}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</mat-table>

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

为什么我没有填充mat-table？是因为响应的异步性质吗？

Answer 1

component.ts文件中有一个错字：您没有将显示列的数组分配给displayedColumns，而是只定义了变量。

所以，而不是

 displayedColumns: ['id', 'applicant', 'manager', 'leavetype', 'start', 'end', 'return', 'status'];

应该是

 displayedColumns: string[] = ['id', 'applicant', 'manager', 'leavetype', 'start', 'end', 'return', 'status'];

Answer 2

嗨，我有一个类似的问题，我可以记录数据源的数据，但是数据表却不显示数据。

我在服务中创建了一个模拟数据数组，并传递了它，而不是我从数据库中获得的结果。使用Mock-Array可以正常工作，并且我在席子表中填充了数据。

在我同时记录了数据库和Mock-Data的结果之后，在控制台中，我注意到我从数据库中获得了一个带有数组而不是数组的对象。

浏览器控制台->

MOCK-DATA：[{...}]

数据库：{[{......]}

如果仔细观察，您可以在浏览器DOM中看到数据源设置为[Object object]，我认为这是有问题的，因为Mat-Table无法访问数据。

我找到了一种解决方法，在该方法中，我传递对象的数组而不是对象，这有点脏，但是会一直执行直到找到问题的根源为止。

这是我的服务

rfc.service.ts

@Injectable({
  providedIn: 'root'
})
export class RfcService {
  rfcsChanged = new Subject<Rfc[]>();
  private dbSubs: Subscription[] = [];

  <<MOCK-DATA>>

  constructor(private http: HttpClient) { }

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  };

  fetchRfcs() {...}

  cancelSubscriptions() {
    this.dbSubs.forEach(sub => sub.unsubscribe());
  }

从以下位置更改代码后：

fetchRfcs() {
  this.dbSubs.push(
    this.http.get<Rfc[]>('http://localhost:3000/rfcs')
     .subscribe((rfcs: Rfc[]) => {
       // console.log(this.MOCK_RFCS);
       // console.log(rfcs);
       this.rfcsChanged.next(rfcs); 
     })
  );
}

收件人：

fetchRfcs() {
  this.dbSubs.push(
    this.http.get<Rfc[]>('http://localhost:3000/rfcs')
     .subscribe((rfcs: Rfc[]) => {
        // console.log(this.MOCK_RFCS);
        // console.log(rfcs.rfcs);
        this.rfcsChanged.next(rfcs.rfcs); 
     })
    );
}

有效。

我不知道为什么将响应数组包装在一个对象中，但是我建议检查您的服务以及它如何接收数据。目前，我试图找到一种从后端映射我的响应的方法，以使它不包装在对象中。

您如何检索服务中的数据？

Answer 3

尝试检查是否设置了this.leaveApplications。

ngOnInit() {
this.leaveApplicationService.getLeaveApplications().subscribe(leaveapplications => {
  this.leaveApplications = leaveapplications;
  if (this.leaveApplications) {
     this.dataSource = new MatTableDataSource<leaveapplication>(this.leaveApplications);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      console.log(this.dataSource);
  }
 });
}

Answer 4

在上述HTML代码的ng-container中，进行如下更改。

From matColumnDef="start" to matColumnDef="startDate" From matColumnDef="end" to matColumnDef="endDate " From matColumnDef="return" to matColumnDef="returnDate"

matColumnDef必须与数据列完全匹配，否则数据将不会显示在mat-table中。

mat-table angular 6尽管有dataSource但没有显示任何数据

4 个答案: