在Angular中使用ngx-datatable迭代展示Firestore数据问题

你当前的问题核心是两点：

1. ngx-datatable列定义没有显式绑定prop属性，仅配置name仅作为表头展示，不会自动匹配Firestore返回的记录字段，第四列能正常显示是因为该列的name值刚好和你Firestore数据里的字段名完全匹配，其余列表头名和实际字段名不一致就会取不到值。
2. 你在ngx-datatable标签上绑定了[columns]="columns"属性，但ts文件中没有给columns变量赋值，空配置会和模板中写的列定义产生冲突。

解决步骤 #

• 第一步：先查看你控制台打印的records数组中每条对象的字段名，确认要展示的字段实际命名（比如是surname还是last_name，是timestamp还是create_time等）
• 第二步：删除ngx-datatable标签上的[columns]="columns"属性，因为你已经在模板内写了完整的列定义，不需要额外传入列配置。
• 第三步：给每个ngx-datatable-column添加prop属性，值为你第一步确认的对应字段名，示例如下（请将prop的值替换为你实际的字段名）：

<div class="ion-padding">
  <ngx-datatable
  class="material"
  [limit]="8"
  [rows]="rows"
  [rowHeight]="50"
  [columnMode]="'force'"
  [headerHeight]="50"
  [footerHeight]="50"
  [scrollbarV]="true"
  [scrollbarH]="true">

    <ngx-datatable-column name="姓氏" prop="surname">
      <ng-template ngx-datatable-cell-template let-value="value">{{ value }}</ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="名字" prop="firstName">
      <ng-template ngx-datatable-cell-template let-value="value">{{ value }}</ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="学号" prop="studentId">
      <ng-template ngx-datatable-cell-template let-value="value">{{ value }}</ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="操作行为" prop="action">
      <ng-template ngx-datatable-cell-template let-value="value">{{ value }}</ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="操作时间" prop="timestamp">
      <ng-template ngx-datatable-cell-template let-value="value">{{ value | date:'yyyy-MM-dd HH:mm:ss' }}</ng-template>
    </ngx-datatable-column>
  </ngx-datatable>
</div>

• 可选优化：补充取消订阅逻辑，避免内存泄漏，修改ts代码如下：

import { Subscription } from 'rxjs';

export class AuditTrailPage implements OnInit, OnDestroy {

  rows: any[] = [];
  private auditSub: Subscription;


  constructor(private menu: MenuController,
              private afs: AngularFirestore,
              private auditService: AuditTrailService
    )
    {
      this.getData();
    }

  ngOnInit() {
 
  }

  ngOnDestroy() {
    // 组件销毁时取消Firestore订阅，避免内存泄漏
    this.auditSub?.unsubscribe();
  }

  getData() {
    this.auditSub = this.afs.collection('audit').valueChanges().subscribe((records) => {
      this.rows = records;
      console.log(records);
    });
  }
}

内容的提问来源于stack exchange，提问作者John Paulo A. Geronimo