Question

我最近负责创建一个以表格格式显示员工列表的组件，首先使用来自硬编码JSON数据对象的数据，以及如何使用来自Web服务的数据来完成。此外，还有一个标有＆＃39;显示（/隐藏）＆＃39;的按钮。需要包含员工，允许用户根据employees表的可见性切换员工列表表，其中包含按钮的值。这是表格的外观：

Employee Data Table Example image

现在我立即上线并开始查看有关Angular数据表的教程，看看是否有人试图做类似的事情，因为当然有人。我发现并跟着这一个：https://www.youtube.com/watch?v=NSt9CI3BXv4。本教程正是我所需要的，并使用Web服务来完成它。（顺便说一下，本教程使用前缀＆＃39; user＆＃39;进行目录和文件命名，但我使用前缀＆＃39; employee＆＃39;因为我负责开发的组件是关于员工的。）我能够完成本教程，但最后，来自Web服务的数据不会显示在我的表格中。当我检查网络结果时，我看到数据是从Web服务返回的，它不会因某种原因而显示。我会发布我认为你最想看到的内容，我会在这篇文章中添加您需要查看的内容，但整个代码库可以在我的github repo https://github.com/cmazzochi81/employeeApp

中找到

谢谢，谢谢你的时间， CM

雇员-table.component.html

<div>
  <mat-table [dataSource] = "dataSource">
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
      <mat-cell *matCellDef="let employee">{{employee.name}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="username">
      <mat-header-cell *matHeaderCellDef>Username</mat-header-cell>
      <mat-cell *matCellDef="let employee">{{employee.username}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef>Email</mat-header-cell>
      <mat-cell *matCellDef="let employee">{{employee.email}}</mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns" color="primary">
      <mat-row *matRowDef="let row; columns:displayedColumns"></mat-row>
    </mat-header-row>
  </mat-table>
</div>

雇员表-component.ts

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {MatSort, MatSortable, MatTableDataSource} from '@angular/material';
import {EmployeeService} from '../employee.service';

@Component({
  selector: 'app-employee-table',
  templateUrl: './employee-table.component.html',
  styleUrls: ['./employee-table.component.css']
})
export class EmployeeTableComponent implements OnInit {

  dataSource;
  displayedColumns = ['name', 'username', 'email'];

  constructor(private employeeService: EmployeeService) { }

  ngOnInit() {
    this.employeeService.getEmployee().subscribe(results => {
      if(!results){

        return;
      }
      this.dataSource = new MatTableDataSource(results);
    })
  }

}

employee.service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Employee} from './models/employee.model';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class EmployeeService {

private serviceUrl = "https://jsonplaceholder.typicode.com/users";

constructor(private http: HttpClient) { }

getEmployee():Observable<Employee[]>{
    return this.http.get<Employee[]>(this.serviceUrl);
}
}

employee.model.ts

export interface Employee {
    name:string;
    username:string;
    email:string;

}

Answer 1

问题在于你的HTML：

您正在定义mat-header-row中的mat-row，如您所见：

<mat-header-row *matHeaderRowDef="displayedColumns" color="primary">
  <mat-row *matRowDef="let row; columns:displayedColumns"></mat-row>
</mat-header-row>

正确的方法是：

<mat-header-row *matHeaderRowDef="displayedColumns" color="primary"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

在开始mat-row声明之前，你必须关闭mat-header-row。

查看here

带有可排序接头的Angular 5材料表

1 个答案: