0

当我从 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;
    });
   }
  });

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

即使我在全球范围内声明了列数组，它也无法识别它。

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

任何提示表示赞赏。谢谢你。

4

1 回答 1

0

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

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在回调内部处于不同的上下文中，因此您会收到该错误。

要解决这个问题，您需要使用箭头功能：

箭头函数没有自己的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;
});
于 2019-03-17T23:50:01.933 回答