我想用來ngx-datatable使我的網站中的表格具有回應性。
我在 Youtube ( 
我嘗試在 Subscription 方法中 console.log 記錄，幸運的是它獲取了正確的資料：
審計跟蹤.html
<div class="ion-padding">
<ngx-datatable
class="material"
[limit]="8"
[rows]="rows"
[rowHeight]="50"
[columns]="columns"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[scrollbarV]="true"
[scrollbarH]="true">
<ngx-datatable-column name="Surname">
<ng-template ngx-datatable-cell-template let-value="value">{{ value }}</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="First Name">
<ng-template ngx-datatable-cell-template let-value="value">{{ value }}</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Student ID">
<ng-template ngx-datatable-cell-template let-value="value">{{ value }}</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Action">
<ng-template ngx-datatable-cell-template let-value="value">{{ value }}</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Timestamp">
<ng-template ngx-datatable-cell-template let-value="value">{{ value }}</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
審計跟蹤.ts
export class AuditTrailPage implements OnInit, OnDestroy {
rows;
columns;
constructor(private menu: MenuController,
private afs: AngularFirestore,
private auditService: AuditTrailService
)
{
this.getData();
}
ngOnInit() {
}
getData() {
this.afs.collection('audit').valueChanges().subscribe((records) => {
this.rows = records;
console.log(records);
});
}
有沒有辦法使用 ngx-datatable 迭代 Firestore 中的資料
uj5u.com熱心網友回復：
要使用 迭代 Firestore 中的資料ngx-datatable，用戶必須prop為該列設定一個屬性。
更多資訊：https : //swimlane.gitbook.io/ngx-datatable/api/column/inputs#prop-string
選項 1 - 在 HTML 檔案中
<ngx-datatable-column name="Surname" prop="userSurname">
<ng-template ngx-datatable-cell-template let-value="value">{{ value }}</ng-template>
</ngx-datatable-column>
選項 2 - 在 TS 檔案中
getData() {
this.afs.collection('audit', ref => ref.orderBy("createdAt", "desc")).valueChanges().subscribe((records) => {
this.rows = records;
this.columns = [
{ prop: 'userSurname', name: 'Surname'},
{ prop: 'userName', name: 'First Name'},
{ prop: 'userSchoolId', name: 'School ID'},
{ prop: 'action', name: 'Action'},
{ prop: 'createdAt', name: 'Timestamp'}
];
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/361077.html
標籤：有角的 打字稿 离子框架 谷歌云firestore