Question

当我从Firebase数据库中检索值时，我想将值推入如下所示的数组中

 columns: any[];
 this.columns = [
{ columnDef: 'FirstName', header: 'First Name',    cell: (element: any) => `${element.FirstName}` },
{ columnDef: 'LastName', header: 'Last Name',    cell: (element: any) => `${element.LastName}` },
];

这是我到目前为止尝试过的......

 this.af.list('/datalist', {
 query: {
    limitToLast: 200,
    orderByChild: 'name',
    equalTo: 'spiderman',
    preserveSnapshot: true
  }
 }).subscribe(snapshot=>{
   if(snapshot!=undefined){
    snapshot.forEach(function(childSnapshot) {

    this.columns.push( { columnDef: childSnapshot.heroname, header: childSnapshot.herotitle,    cell: (element: any) => `${element.heroname}` });
    this.displayedColumns = this.columns.map(c => c.columnDef);

    return false;
    });
   }
  });

上述代码错误是无法读取未定义的属性“列”

即使我全局声明了columns数组，也无法识别它。

在HTML中，我想这样使用。...

   <ng-container *ngFor="let column of columns" [cdkColumnDef]="column.columnDef">
    <mat-header-cell *cdkHeaderCellDef>{{ column.header }}</mat-header-cell>
    <mat-cell *cdkCellDef="let row">{{ column.cell(row) }}</mat-cell>
   </ng-container>

任何提示都值得赞赏。谢谢。

Answer 1

由于以下代码，您收到此错误：

snapshot.forEach(function(childSnapshot) {

this.columns.push( { columnDef: childSnapshot.heroname, header:  childSnapshot.herotitle,    cell: (element: any) => `${element.heroname}` });
this.displayedColumns = this.columns.map(c => c.columnDef);

return false;
});

这里forEach使用回调函数作为第一个参数，而回调中的this在不同的上下文中，因此会出现该错误。

要解决此问题，您需要使用arrow function：

箭头功能没有自己的this。使用封闭词汇范围的this值；箭头函数遵循正常的变量查找规则。因此，在搜索当前范围中不存在的this时，他们最终从其包围范围中找到了this。

基本上，箭头功能中的this会引用其中定义了箭头功能的this，因此您可以执行以下操作：

snaphot.forEach((childSnapshot)=>{

this.columns.push( { columnDef: childSnapshot.heroname, header: childSnapshot.herotitle,    cell: (element: any) => `${element.heroname}` })
this.displayedColumns = this.columns.map(c => c.columnDef);

return false;
});

检索Firebase列表数据以创建动态表

1 个答案: