Question

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatSort, MatPaginator} from '@angular/material';
import {merge, Observable, of as observableOf} from 'rxjs';
import {catchError, map, startWith, switchMap} from 'rxjs/operators';
import {PersonModel, RosterPeopleApi, DaoModule} from '../dao/dao.module';



@Component({
  selector: 'app-people',
  templateUrl: './people.component.html',
  styleUrls: ['./people.component.css']
})
export class PeopleComponent implements OnInit {
 dao: DaoModule|null;
displayedColumns: string[] = ['id', 'lastName', 'firstName', 'middleName', 'birthDate'];
data: PersonModel[];
resultsLength = 0;
  isLoadingResults = true;
isConnectionError = true;

@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
  constructor(dao: DaoModule) {this.dao = dao; }

  ngOnInit() {
    this.paginator.pageSize = 30;
    merge(this.sort.sortChange, this.paginator.page)
      .pipe(
        startWith({}),
        switchMap(() => {
          this.isLoadingResults = true;
          return this.dao.GetPeopleFromRoster(this.sort.active, this.sort.direction,
            this.paginator.pageIndex, this.paginator.pageSize);
        }),
        map(data => {
          this.isLoadingResults = false;
          this.isConnectionError = false;
          return data;
        })
      )
      .subscribe(data => {
        this.resultsLength = data.totalCount;
        this.data = data.people;
      });
  }

<div class="container mat-elevation-z8">
  <div class="loading-shade" *ngIf="isLoadingResults || isConnectionError">
<mat-spinner *ngIf="isLoadingResults"></mat-spinner>
    <div class="connection-error" *ngIf="isConnectionError">
      Connection error! Try again later!
    </div>
  </div>

  <div class="table-container">

    <table mat-table [dataSource]="data" class="table"  matSort matSortActive="firstName" matSortDisableClear matSortDirection="asc">

      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> id </th>
        <td mat-cell *matCellDef="let row">{{row.id}}</td>
      </ng-container>
      <ng-container matColumnDef="firstName">
        <th mat-header-cell *matHeaderCellDef>firstName</th>
        <td mat-cell *matCellDef="let row">{{row.firstName}}</td>
      </ng-container>
      <ng-container matColumnDef="lastName">
        <th mat-header-cell *matHeaderCellDef>lastName</th>
        <td mat-cell *matCellDef="let row">{{row.lastName}}</td>
      </ng-container>
      <ng-container matColumnDef="middleName">
        <th mat-header-cell *matHeaderCellDef>middleName</th>
        <td mat-cell *matCellDef="let row">{{row.middleName}}</td>
      </ng-container>
      <ng-container matColumnDef="birthDate">
        <th mat-header-cell *matHeaderCellDef>birthDate</th>
        <td mat-cell *matCellDef="let row">{{row.birthDate | date}}</td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="this.displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
  <mat-paginator [length]="resultsLength" [pageSize]="30"></mat-paginator>
</div>

这将导致错误。我发现的唯一解决方案是“修复displayColumns”。但是根据JSON，一切正常。

[ { “ id”：1 “ firstName”：“ FirstName1”， “ lastName”：“ LastName1”， “ middleName”：“ MiddleName1”， “ birthDate”：“ 2018-07-17T12：58：53.7942318 + 03：00” }， { “ id”：2 “ firstName”：“ FirstName2”， “ lastName”：“ LastName2”， “ middleName”：“ MiddleName2”， “ birthDate”：“ 2018-07-17T12：58：53.8410577 + 03：00” }， { “ id”：3， “ firstName”：“ FirstName3”， “ lastName”：“ LastName3”， “ middleName”：“ MiddleName3”， “ birthDate”：“ 2018-07-17T12：58：53.8418257 + 03：00” } ]

我该如何解决？

Answer 1

就我而言，我将代码从ngOnInit()移到了ngAfterViewInit()。

角度垫表错误：找不到ID为“ id”的列

1 个答案: