在 Angular 中使用“ngx-datatable”迭代 Firestore 数据答案

【问题标题】：Iterate Firestore Data using "ngx-datatable" in Angular在 Angular 中使用“ngx-datatable”迭代 Firestore 数据
【发布时间】：2021-12-23 01:44:45
【问题描述】：

我想使用ngx-datatable 使表格在我的网站中响应。

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

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

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

audit-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>

audit-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-datatable 迭代 Firestore 中的数据

【问题讨论】：

你可以尝试在订阅方法中制作console.log(records)来检查你是否正确接收数据
我已经添加了结果。我从 console.log 得到正确的数据
我没有看到你设置 'this.columns' 来告诉表格从哪里获取数据
根据教程，该列是在html文件上设置的，TS端没有this.columns。
看视频中的5:12

标签： angular typescript ionic-framework google-cloud-firestore

【解决方案1】：

要使用ngx-datatable 迭代Firestore 中的数据，用户必须为该列设置prop 属性。

选项 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'}
      ];
    });

【讨论】：