Нет ошибки, но не отображаются данные в таблице Mat

Question

Я хочу показать данные из php mysql в мою angular таблицу матов. Я использую angular CLI 8.1.0. Ниже приведен мой код, может кто-нибудь помочь, что на самом деле ошибка. Я сделал остальные API через PHP и MYSQL, и когда я нажму на почтальона, он выдаст запись базы данных в формате json. Но я не могу показать его на своем матовом столе.

api.service.ts

    import { Injectable, Output,EventEmitter } from '@angular/core';
    import { map } from 'rxjs/operators';
    import { HttpClient } from '@angular/common/http';
    import { Users } from './users';
    import { Observable } from 'rxjs';
    import { Displayvendor } from './adminpanel/home/vendor-action/displayvendor';

    @Injectable({
      providedIn: 'root'
    })
    export class ApiService {          
      private static URL = 'http://localhost/repos/Sportaz-repo/VaamozWeb/VaamozBusiness/RestApi/VaamozStore/AdminStore/angular_admin/php/index.php';

      constructor(private httpClient : HttpClient) { }          
      userList(): Observable<Displayvendor[]> 
      {
        return this.httpClient.get(ApiService.URL).pipe(map((response: {data: Displayvendor[]}) => response.data));
      }         
    }

vendor-action.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatSort, MatTableDataSource, MatPaginator} from '@angular/material';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { ApiService } from 'src/app/api.service';
import { Displayvendor } from './displayvendor';

@Component({
  selector: 'app-vendor-action',
  templateUrl: './vendor-action.component.html',
  styleUrls: ['./vendor-action.component.css']
})
export class VendorActionComponent {

  displayvendors : Displayvendor[];
  constructor(private router:Router,public apiService:ApiService){}

  ngOnInit()
  {
    this.apiService.userList().subscribe(this.assignUsers.bind(this));
  }

  assignUsers(displayvendors:Displayvendor[])
  {
    this.displayvendors=displayvendors;
  }        
}

vendor-action.component.ts

<div class="purchases-style">
    <div>
        <table mat-table [dataSource]="displayvendors" class="mat-elevation-z1">
        <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef> Vendor ID </th>
            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
        </ng-container>

        <ng-container matColumnDef="changeColumn">
            <th mat-header-cell *matHeaderCellDef> Change Column </th>
            <td mat-cell *matCellDef="let element"> {{element.changeColumn}} </td>
        </ng-container>

        <ng-container matColumnDef="type">
            <th mat-header-cell *matHeaderCellDef> Change Type </th>
            <td mat-cell *matCellDef="let element"> {{element.type}} </td>
        </ng-container>

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

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

        <tr mat-header-row *matHeaderRowDef="['id','changeColumn','type','timestamp','status']"></tr>
        <tr class="rowhover" (click)="displayData(row)" mat-row *matRowDef="let row; columns: ['id','changeColumn','type','timestamp','status']"></tr>
        </table>

         <mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]" class="mat-elevation-z1">
         </mat-paginator>
     </div>
     <router-outlet></router-outlet>
</div>

displayvendor.ts

export interface Displayvendor {
    id: number;
    changeColumn: string;
    type: string;
    timestamp: string;
    status: string;
  }

Answer 1

добавить это к вашему компоненту

import { MatTableDataSource } from '@angular/material';

переменная должна иметь тип MatTableDataSource

displayvendors: MatTableDataSource<any>

и присвойте массив, полученный от вызова API, вашему displayvendors следующим образом.

this.apiService.userList().subscribe(displayvendors=> { this.displayvendors = new MatTableDataSource(displayvendors); })

Это сработало для меня. Идея состоит в том, чтобы преобразовать ваш массив в структуру таблицы матов, за которой следует Angular материал

Answer 2

Если вы хотите использовать массив из Observable Object с Asyn c Pipe, измените код на:

    export class VendorActionComponent {

      displayvendors : any;
      constructor(private router:Router,public apiService:ApiService){}

      ngOnInit()
      {
        this.displayvendors = this.apiService.userList();
      }
   ...
    }