垫表角度6尽管具有dataSource，但未显示任何数据 [英] mat-table angular 6 not showing any data despite having the dataSource
问题描述
我想通过Angular材质设计的数据表mat-table显示一个列表. 这是我的组件:
I want to show a list through Angular material design's data table mat-table. Here is my component:
import { LeaveapplicationService } from './../../services/leaveapplication.service';
import { leaveapplication } from './../../models/leaveapplication';
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
// import { DataSource } from '@angular/cdk/table';
@Component({
selector: 'app-leaveapplication-list',
templateUrl: './leaveapplication-list.component.html',
styleUrls: ['./leaveapplication-list.component.scss']
})
export class LeaveapplicationListComponent implements OnInit {
leaveApplications: leaveapplication[];
displayedColumns: ['id', 'applicant', 'manager', 'leavetype', 'start', 'end', 'return', 'status'];
dataSource: MatTableDataSource<leaveapplication>;
constructor(private leaveApplicationService: LeaveapplicationService) { }
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
ngOnInit() {
this.leaveApplicationService.getLeaveApplications().subscribe(leaveapplications => {
this.leaveApplications = leaveapplications;
this.dataSource = new MatTableDataSource<leaveapplication>(this.leaveApplications);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
console.log(this.dataSource);
});
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
this.dataSource.filter = filterValue;
}
}
离开应用程序界面:
export interface leaveapplication {
id: number;
applicant: string;
manager: string;
startdate: Date;
enddate: Date;
returndate: Date;
leavetype: string;
status: string;
}
我在控制台中正确获取了数据源:
I am getting the dataSource properly in the console:
但是mat-table返回空单元格:
But the mat-table return empty cells:
这是我的模板:
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<mat-table #table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Form ID </th>
<td mat-cell *matCellDef="let leaveapplication"> {{leaveapplication.id}} </td>
</ng-container>
<ng-container matColumnDef="applicant">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Applicant </th>
<td mat-cell *matCellDef="let leaveapplication"> {{leaveapplication.applicant}} </td>
</ng-container>
<ng-container matColumnDef="manager">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Manager </th>
<td mat-cell *matCellDef="let leaveapplication"> {{leaveapplication.manager}} </td>
</ng-container>
<ng-container matColumnDef="leavetype">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Leave Type </th>
<td mat-cell *matCellDef="let leaveapplication"> {{leaveapplication.leaveType}} </td>
</ng-container>
<ng-container matColumnDef="start">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Start Date </th>
<td mat-cell *matCellDef="let leaveapplication"> {{leaveapplication.startDate | date:'dd-MM-yyyy'}} </td>
</ng-container>
<ng-container matColumnDef="end">
<th mat-header-cell *matHeaderCellDef mat-sort-header> End Date </th>
<td mat-cell *matCellDef="let leaveapplication"> {{leaveapplication.endDate | date:'dd-MM-yyyy'}} </td>
</ng-container>
<ng-container matColumnDef="return">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Return Date </th>
<td mat-cell *matCellDef="let leaveapplication"> {{leaveapplication.returnDate | date:'dd-MM-yyyy'}} </td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
<td mat-cell *matCellDef="let leaveapplication"> {{leaveapplication.status}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
为什么我没有填充垫子桌子?是因为响应是异步的吗?
Why am I not getting the mat-table populated? Is it because of the asynchronous nature of the response?
推荐答案
我有一个类似的问题，我可以记录数据源的数据，但数据表却不显示数据.
Hi i have a similar issue, where i can log the data of the DataSource but the Data Table, doesn't display the data.
我在服务中创建了一个模拟数据数组，并传递了它，而不是我从数据库中获得的结果.使用Mock-Array可以正常工作，并且我在席子表中填充了数据.
I created an Array of Mock-Data in my service and passed this instead of the result i get from my database. With the Mock-Array it worked and i got data populated in my mat-table.
在我同时记录了数据库和Mock-Data的结果之后，在控制台中，我注意到我从数据库中获得了一个带有数组的对象，而不仅仅是数组.
After i logged both, the result from the database and the Mock-Data, in the console i noticed that i get an object with an array inside from my database instead of just an array.
浏览器控制台->
MOCK-DATA:[{...}]
MOCK-DATA: [ {...} ]
数据库:{[{......]}
DATABASE: { [ {...} ] }
如果仔细观察，您可以在浏览器DOM中看到数据源设置为[Object object]，我认为这是有问题的，因为Mat-Table无法访问数据.
If you look closely you can see in your browser DOM, the data source is set to [Object object] and i think there is the problem, because the Mat-Table can't access the data.
我找到了一种解决方法，在该方法中，我传递对象的数组而不是对象，这有点脏，但是会一直执行直到找到问题的根源为止.
I found a workaround, where i pass the array of the object instead of the object, which is a bit dirty, but does the job until i find the root of the issue.
这是我的服务
rfc.service.ts
rfc.service.ts
@Injectable({
providedIn: 'root'
})
export class RfcService {
rfcsChanged = new Subject<Rfc[]>();
private dbSubs: Subscription[] = [];
<<MOCK-DATA>>
constructor(private http: HttpClient) { }
httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
fetchRfcs() {...}
cancelSubscriptions() {
this.dbSubs.forEach(sub => sub.unsubscribe());
}
我从以下位置更改代码后:
After i changed my code from:
fetchRfcs() {
this.dbSubs.push(
this.http.get<Rfc[]>('http://localhost:3000/rfcs')
.subscribe((rfcs: Rfc[]) => {
// console.log(this.MOCK_RFCS);
// console.log(rfcs);
this.rfcsChanged.next(rfcs);
})
);
}
收件人:
fetchRfcs() {
this.dbSubs.push(
this.http.get<Rfc[]>('http://localhost:3000/rfcs')
.subscribe((rfcs: Rfc[]) => {
// console.log(this.MOCK_RFCS);
// console.log(rfcs.rfcs);
this.rfcsChanged.next(rfcs.rfcs);
})
);
}
有效.
我不知道为什么我的响应数组包装在一个对象中，但是我建议检查您的服务以及它如何接收数据.目前，我试图找到一种从后端映射我的响应的方法，以使它不包装在对象中.
I don't know why my response array is wrapped in an object, but i recommend checking your service and how it receives the data. At the moment i try to find a way to map my response from the backend, so that it isn't wrapped inside an object.
如何获取服务中的数据?
How do you retrieve data in your service?
这篇关于垫表角度6尽管具有dataSource，但未显示任何数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
