Блог

Главная - Вопросы по программированию - Извлечение данных списка firebase для создания динамической таблицы

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

#angular #firebase #firebase-realtime-database #angular-material #angular-material-table

#angular #firebase #firebase-база данных в реальном времени #angular-материал #angular-material-table

Вопрос:

Я хочу поместить значения в массив, подобный приведенному ниже, когда я извлекаю значения из базы данных 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’ из undefined

Несмотря на то, что я объявил массив 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>

Приветствуется любая подсказка. Спасибо.

Комментарии:

1. Оно не распознает this ключевое слово. Вы можете присвоить их переменной перед вызовом функции, self = this а затем использовать переменную self внутри вашей подписки.

Ответ №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:

Функция arrow не имеет своей собственной this . Используется значение this для окружающей лексической области видимости; функции со стрелками следуют обычным правилам поиска переменных. Таким образом, при поиске, this которого нет в текущей области, они в конечном итоге находят this из окружающей области.

В основном это означает, что this внутри функции arrow будет ссылаться на this , в котором была определена функция arrow, поэтому вы сможете выполнить следующее:

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