Извлечение данных списка Firebase для создания динамической таблицы

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;
    });
   }
  });

Ошибка с кодом выше Невозможно прочитать свойство 'столбцы' из неопределенного

Несмотря на то, что я объявил массив столбцов глобально, он не распознает его.

В 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 внутри обратного вызова находится в другом контексте, и поэтому вы получаете эту ошибку.

Чтобы решить эту проблему, вам нужно использовать функцию стрелки :

Функция стрелки не имеет своей собственной 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;
});