Angular партия таблицы материалов, загружающая содержимое firebase из firestore - PullRequest
Новая
       4

Angular партия таблицы материалов, загружающая содержимое firebase из firestore

0 голосов
/ 05 мая 2020

Я пытаюсь получить данные из коллекции в хранилище Firebase в моем angular приложении, но данные не появляются, пока есть данные в базе данных. Я пробовал переместить выборку данных из моей службы данных в компонент, но там ничего не работало.

Компонент HTML Файл 

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container matColumnDef="communityTitle">
        <th mat-header-cell *matHeaderCellDef> Community Title/Name </th>
        <td mat-cell *matCellDef="let element"> {{element.communityTitle}} </td>
    </ng-container>
    <ng-container matColumnDef="dateOfBlacklist">
        <th mat-header-cell *matHeaderCellDef> Date of Blacklist </th>
        <td mat-cell *matCellDef="let element"> {{element.dateOfBlacklist}} </td>
    </ng-container>
    <ng-container matColumnDef="reason">
        <th mat-header-cell *matHeaderCellDef> Reason for Blacklist </th>
        <td mat-cell *matCellDef="let element"> {{element.reason}} </td>
    </ng-container>
    <ng-container matColumnDef="effectiveDate">
        <th mat-header-cell *matHeaderCellDef> Effective Until (Date) </th>
        <td mat-cell *matCellDef="let element"> {{element.effectiveDate}} </td>
    </ng-container>
    <ng-container matColumnDef="notes">
        <th mat-header-cell *matHeaderCellDef> Notes </th>
        <td mat-cell *matCellDef="let element"> {{element.notes}} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Component Typescript File 

import { Component, OnInit } from '@angular/core';
import { BlacklistedCommunityData } from 'src/app/interface';
import { DataService } from 'src/app/data.service';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-rules-blacklisted-communities',
  templateUrl: './rules-blacklisted-communities.component.html',
  styleUrls: ['./rules-blacklisted-communities.component.scss']
})
export class RulesBlacklistedCommunitiesComponent implements OnInit {

  itemCollection: AngularFirestoreCollection<BlacklistedCommunityData>
  items: Observable<BlacklistedCommunityData[]>

  constructor(private dataService: DataService, private afs: AngularFirestore) {
    this.itemCollection = this.afs.collection('fzrpBlacklistedCommunities');
    this.items = this.itemCollection.valueChanges();
    console.log(this.items)
  }

  displayedColumns = [
    'communityTitle', 
    'dateOfBlacklist', 
    'reason', 
    'effectiveDate', 
    'notes'
  ];
  dataSource = this.items;

  ngOnInit(): void {
  }

}

Ответы [ 3 ]

0 голосов
/ 05 мая 2020

Кажется, вам не хватает объекта MatTableDataSource. Вот что вам нужно сделать. Сначала добавьте свойство MatTableDataSource 

dataSource: MatTableDataSource<IUsersList>;

Затем вам нужно вызвать это свойство MatTableDataSource с помощью новое ключевое слово , чтобы создать его новый экземпляр и передать в него массив данных. . 

let recordObj:any[] = [ //=======> records array
    {
        id: 1,
        name: 'John Doe',
        role: "hero1",
    },
    {
        id: 2,
        name: 'John Doe',
        role: "hero2",
    },
    {
        id: 3,
        name: 'Troy',
        role: "hero3",
    },
]
this.dataSource = new MatTableDataSource<any>(recordObj); //=======> Pass records array

Это должно заставить его работать. Надеюсь, это поможет :)

0 голосов
/ 05 мая 2020

Проблема была решена после изменения файла машинописного текста сверху на это: 

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

...

export class RulesBlacklistedCommunitiesComponent implements AfterViewInit {

  dataSource: MatTableDataSource<any>;
    displayedColumns = [
    'communityTitle', 
    'dateOfBlacklist', 
    'reason', 
      'effectiveDate', 
      'notes'
    ];

  constructor(private dataService: DataService, private afs: AngularFirestore) {

  }

//  dataSource = new MatTableDataSource<any>(this.items);

  ngAfterViewInit() {
    this.afs.collection('fzrpBlacklistedCommunities').valueChanges().subscribe(data => {
      this.dataSource = new MatTableDataSource(data);
    })
  }
}
0 голосов
/ 05 мая 2020

Попробуйте изменить dataSource = this.items; на dataSource.data = this.items;

...