在 Angular 中使用 "ngx-datatable" 迭代 Firestore 数据

Question

我想使用 ngx-datatable 使我网站的 table 响应。

我在 Youtube (https://youtu.be/IptxeHSuhko) 上尝试了这个教程，但不幸的是，当我使用 ngx-datatable 时数据没有显示。

我尝试了代码，但它已经有问题了，这是图像截图，它只显示了第四列：

我尝试console.log订阅方法中的记录，幸运的是它获取了正确的数据：

审计-trail.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>

审计-trail.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-data 迭代 Firestore 中的数据table

Answer 1

要使用 ngx-datatable 迭代 Firestore 中的数据，用户必须为列设置 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'}
      ];
    });

在 Angular 中使用 "ngx-datatable" 迭代 Firestore 数据

Iterate Firestore Data using "ngx-datatable" in Angular

typescript

ionic-framework

angular

google-cloud-firestore