Я пытаюсь заполнить мою таблицу mat данными, которые были получены из запроса get. Однако я не могу заполнить таблицу, когда я делаю это с динамическими данными. Однако он работает с жестко закодированными значениями.

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

Файл .TS

import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
import { MatTableDataSource, MatPaginator, MatDialogConfig, MatDialog } from '@angular/material';
import { NewSiteDialogComponent } from '../new-site-dialog/new-site-dialog.component';
import { siteDetails } from '../shared/interfaces/site-details.interface';
import { SiteService } from '../shared/services/site-service';

@Component({
  selector: 'app-map-result',
  templateUrl: './map-result.component.html',
  styleUrls: ['./map-result.component.scss']
})
export class MapResultComponent implements OnInit {

  displayedColumns: string[] = ['name', 'address', 'moreDetails'];
  number: number;
  result : string;
  mapResults: Array<{name: string, address: string}> = [];
  dataSource : MatTableDataSource<any>;
  siteResults: Array<{Site_ID: number, Address1: string, Address2: string, Town: string, County: string, PostCode: string, Name: string, Description: string, TelephoneNumber: string}> = [];

  @Output() moreDetails = new EventEmitter();

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  constructor(public dialog: MatDialog,
    private _siteService: SiteService) {
  }

  loadMoreDetailsComp(changed: string) {
    this.moreDetails.emit(changed);
  }

  ngOnInit() {
    this.dataSource = new MatTableDataSource(
      this.siteResults
    )

    console.log(this.dataSource);
    console.log(this.siteResults);

  }
    /**
   * Set the paginator and sort after the view init since this component will
   * be able to query its view for the initialized paginator and sort.
   */
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  openNewSiteDialog(){
    const dialogConfig = new MatDialogConfig();

    dialogConfig.autoFocus = true;
    dialogConfig.disableClose = true;

    this.dialog.open(NewSiteDialogComponent, dialogConfig);
  }

  populateResults($event) {
    this.siteResults.length = 0;
    this._siteService.getSites($event.dataObj.label)
    .subscribe((data: any[]) => {
      data.forEach(e => {
       this.siteResults.push(new siteDetails(e.Site_ID, e.Address1, e.Address2, e.Town, e.County, e.PostCode, e.Name, e.Description, e.TelephoneNumber));
      })
    }) 
    console.log(this.siteResults);
  }

}

export interface Data {
  name: string;
  town: string;
  address: string;
  telephone: string;
}

заменить siteDetails на приведенный ниже, производит заполненную таблицу

this.dataSource = new MatTableDataSource([
      { Name: 'ghjgh',Address1: 'test', sedd: ''},
      { Name: 'jgh',Address1: 'asd'},
      { Name: 'tehjghjst',Address1: 'asdf'},
      { Name: 'tesgt',Address1: 'sfdsd'},
      { Name: 'tesghjgt',Address1: 'sdfs'},
    ])

Снимок экрана заполненной таблицы с жестко закодированными значениями:

enter image description here

Снимок экрана: таблица не заполняется динамически извлекаемыми данными, хотя при регистрации данных в консоли dataSource они появляются в массиве:

enter image description here

HTML:

 <div class="resultsContainer">
    <div class="mapResultHeader">
        <span>Greater London</span>
    </div>
    <div class="mat-elevation-z8">

            <mat-form-field class="filter">
                <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
            </mat-form-field>

            <table mat-table [dataSource]="dataSource">

            <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef> Site Name </th>
                <td mat-cell *matCellDef="let element"> {{element.Name}}</td>
            </ng-container>

            <ng-container matColumnDef="address">
                <th mat-header-cell *matHeaderCellDef> Address </th>
                <td mat-cell *matCellDef="let element"> {{element.Address1}}</td>
            </ng-container>

            <ng-container matColumnDef="moreDetails">
                <th mat-header-cell *matHeaderCellDef> More Details </th>
                <td mat-cell *matCellDef="let element"> 
                    <button mat-raised-button (click)="loadMoreDetailsComp($event)">More Details</button> 
                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>

            <mat-paginator [pageSize]="5" showFirstLastButtons></mat-paginator>
    </div>

    <div class="addNewSite">
        <button mat-raised-button (click)="openNewSiteDialog()">Add New Site</button>
    </div>
</div>
1
ashley g