angular - 如何在 Angular Material 表中显示来自 API 的数据?
问题描述
我有一个包含数据的 API(数组中的数组等)。我想在数据表中显示其中的一些数据。这是代码:
首先我有customer.ts
模型
export interface CustomerResponce {
working_periods: Customer[];
}
export interface Customer {
id: number;
personal_number?: number;
contact_number?: number;
start_date?: Date;
end_date?: Date;
submitted_at?: Date;
approved_by_contact_number?: string;
approved_by_personal_number?: number;
approved_at?: Date;
external_employee_notes?: string;
internal_employee_notes?: string;
customer_notes?: string;
external_employee_signature?: string;
customer_signature?: string;
job_number?: number;
consecutive_service_number?: number;
location_number?: number;
consecutive_operation_number?: number;
status?: number;
original_time_frames?: WorkingPeriod[];
}
export interface WorkingPeriod {
working_period_id?: number;
started_at?: Date;
ended_at?: Date;
pauses?: Pauses[];
activity?: string;
}
export interface Pauses {
start?: Date;
end?: Date;
}
然后我有activityReport.ts
服务
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';
import { Customer, CustomerResponce} from '../_models/customer';
import { catchError } from 'rxjs/operators';
import {BehaviorSubject} from 'rxjs';
import { id } from '@swimlane/ngx-datatable/release/utils';
import { Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class ActivityReportsService {
private filterStatus;
private _customer: BehaviorSubject<Customer[]>;
private TN_API = 'https://localhost:3000/api/v2/working_periods';
constructor(
private http: HttpClient,
private router: Router
) {
}
getAll() {
const httpOptions = {
headers: new HttpHeaders({
Authorization: `Token token=${localStorage.getItem('access_token')}`
})
};
return this.http.get<CustomerResponce>(this.TN_API, httpOptions);
}
setFilterStatus(status: string|null = null): void {
if (this.router.url !== '/dashboard/list') {
this.router.navigate(['/dashboard/list']);
}
this.filterStatus = status;
}
getFilterStatus(): string|null {
return this.filterStatus;
}
updateWorkingPeriod (periodId: number, workingPeriod) {
const httpOptions = {
headers: new HttpHeaders({
Authorization: `Token token=${localStorage.getItem('access_token')}`
})
};
return this.http.put(this.TN_API + '/' + periodId, workingPeriod, httpOptions);
}
}
我也dashboard.component.html
有我的桌子:
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h2>Table 2</h2>
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="start_date">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Mitarbeiter</th>
<td mat-cell *matCellDef="let customers">{{ customers.start_date}} </td>
</ng-container>
<ng-container matColumnDef="end_date">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Einsatz</th>
<td mat-cell *matCellDef="let customers">{{customers.end_date}} </td>
</ng-container>
<ng-container matColumnDef="approved_at">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Eingangsdatum</th>
<td mat-cell *matCellDef="let customers">{{customers.approved_at}}</td>
</ng-container>
<ng-container matColumnDef="submitted_at">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Zeitraum</th>
<td mat-cell *matCellDef="let customers">{{customers.submitted_at}}</td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
<td mat-cell *matCellDef="let customers">{{customers.status}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
</table>
</div>
</div>
</div>
</div>
</div>
最后我有dashboard.component.ts
:
import {Component, OnInit, OnDestroy, ViewChild, AfterViewInit} from '@angular/core';
import { Subscription} from 'rxjs';
import { ActivityReportsService } from '../../services/activity-reports.service';
import { CustomerLoginService } from '../../services/customer-login.service';
import { Customer, CustomerResponce } from '../../_models/customer';
import {MatTableDataSource, MatSort, MatPaginator} from '@angular/material';
@Component({
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit, OnDestroy {
currentUser: Customer;
currentUserSubscription: Subscription;
customers: Customer[] = [];
dataSource: MatTableDataSource<Customer>;
displayedColumns: string[] = ['start_date', 'end_date', 'approved_at', 'submitted_at', 'status'];
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(
private customerLoginService: CustomerLoginService,
public activityReportService: ActivityReportsService
) {
this.currentUserSubscription = this.customerLoginService.currentUser.subscribe(customer => {
this.currentUser = customer;
this.dataSource = new MatTableDataSource(this.customers);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
console.log(this.dataSource);
});
}
ngOnInit() {
this.loadAllReports();
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
console.log(this.dataSource);
}
ngOnDestroy() {
this.currentUserSubscription.unsubscribe();
}
private loadAllReports() {
this.activityReportService.getAll().subscribe((customers: CustomerResponce) => {
this.customers = customers.working_periods;
localStorage.setItem('activityTN', JSON.stringify(customers));
});
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}
我上面显示的代码给了我这个结果:
请帮我显示数据。TIA
解决方案
您可以尝试更改customers
名称item
或其他名称。
在这 :
<ng-container matColumnDef="start_date">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Mitarbeiter</th>
<td mat-cell *matCellDef="let customers">{{ customers.start_date}} </td>
</ng-container>
我认为应该是:
<td mat-cell *matCellDef="let item">{{ item.start_date}} </td>
代替 :
<td mat-cell *matCellDef="let customers">{{ customers.start_date}} </td>
您应该更改所有mat-cell
行。
推荐阅读
- java - 对 BLOB 进行操作需要花费太多时间
- oracle11g - 如何在 Oracle 中查询数据,在 som 条件下显示 1 个额外的行?
- javascript - 如何在 CSS 选择器上使用 Cypress 中的模板文字?
- .net - 执行刷新时模板编译错误
- javascript - React/Next js 站点上的 img 导入错误
- mysql - MySQL LEFT JOIN 查询行为异常
- autodesk-forge - autodesk forge viewer.js 从 6.5.1 更新到 6.6 或 7.1,二维超链接承诺异常
- docker - 在 docker 上运行气流时,我得到:standard_init_linux.go:207: exec 用户进程导致“权限被拒绝”
- javascript - fcm firebase 函数未定义值 - 第一次尝试,已定义 - 第二次尝试
- javascript - 如果在底层元素上定义了内联方式定义的回调,它会损害优化吗?