时间戳

首页 > 解决方案 > 在 Angular 中使用“ngx-datatable”迭代 Firestore 数据

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

问题描述

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

我在 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>

审计跟踪.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 中的数据

标签： angulartypescriptionic-frameworkgoogle-cloud-firestore

解决方案

要使用 迭代 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'}
      ];
    });

推荐阅读