Недавно мне было поручено создать компонент, который отображает список сотрудников в табличном формате, сначала используя данные из жестко закодированного объекта данных JSON, а также то, как это будет сделано с использованием данных из веб-службы. Кроме того, должна быть включена кнопка «Показать (/ Скрыть)» «Сотрудники», позволяющая пользователям переключать таблицу списка сотрудников со значением кнопки, основываясь на видимости таблицы сотрудников. Вот как должна выглядеть таблица:
Пример таблицы данных о сотрудниках image
Теперь я сразу же вышел в интернет и начал смотреть учебные пособия, касающиеся Angular datatables, и выяснил, пытался ли кто-нибудь сделать что-то подобное, потому что, конечно, кто-то это сделал. И я нашел и последовал за этим: https://www.youtube.com/watch?v=NSt9CI3BXv4. Это руководство делает именно то, что мне нужно, и использует веб-сервис для этого. (Кстати, этот учебник использует префикс «user» для имен каталогов и файлов, но я использую префикс «employee», так как компонент, который мне поручено разработать, предназначен для сотрудников.) Я могу пройти весь этот урок , но в конце данные из веб-службы не отображаются в таблице для меня. Когда я проверяю результаты сети, я вижу, что данные возвращаются из веб-службы, но по какой-то причине они просто не отображаются. Я опубликую то, что, я думаю, вы, скорее всего, захотите увидеть, и добавлю к этому посту все, что вам нужно, но вся база кода доступна в моем репозитории github 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;
}