[英]Angular material - mat-table - consuming API
我试图用来自 api(python 烧瓶)的数据填充 mat-table,但没有成功。 我可以在 console.log 上看到 JSON,但是 mat-table 出现了:“错误:找不到 ID 为“id”的列。在 getTableUnknownColumnError 处。”
请你帮助我好吗?
这是 JSON api 响应:
{
"data": [
{
"created_on": "2019-12-23T03:30:24",
"id": 1,
"name": "Test Name 1",
"username": "email1@emmail.com"
},
{
"created_on": "2019-12-26T16:35:38",
"id": 2,
"name": "Test Name 2",
"username": "email2@email.com"
}
],
"message": "Success!"
}
这是获取 http.get 的服务:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Observable, of} from 'rxjs';
import {map} from 'rxjs/operators';
@Injectable({ providedIn: 'root' })
export class UserService {
constructor(private http: HttpClient) { }
getAll(): Observable<any> {
return this.http.get('http://localhost:5000/api/user/list_all').pipe(
map(this.extractData));
}
private extractData(res: Response) {
console.log(res);
return res || {}; // If 'res' is null, it returns empty object
}
}
它是角度数据表组件:
import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
import {UserService} from '../user.service';
import {Observable} from 'rxjs';
import {User} from '../user.model';
import {DataSource} from '@angular/cdk/collections';
export interface IUser {
data: {
id: number;
name: string;
username: string;
};
message: string;
}
@Component({
selector: 'app-user-datatable',
templateUrl: './user-datatable.component.html',
styleUrls: ['./user-datatable.component.css']
})
export class UserDatatableComponent implements OnInit {
displayedColumns: string[] = ['id'];
dataSource = new MatTableDataSource();
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(public userService: UserService) {
}
ngOnInit() {
this.dataSource = new MatTableDataSource(this.getUsers());
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
getUsers() {
this.userService.getAll().subscribe((data: {}) => {
console.log(data);
console.log(data.data);
console.log(data.message);
this.dataSource.data = data.data; // on data receive populate dataSource.data array
return data.data;
});
}
}
这是查看页面:
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let user"> {{user.id}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let user; columns: displayedColumns;"></tr>
</table>
控制台日志(res);
您需要在 HTML 中定义“id”列。
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let user"> {{user.id}} </td>
</ng-container>
这有一列定义为“位置”。
将位置更改为 id。
你displayedColumns
阵列必须有匹配matColumnDef
的每一个。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.