没有错误但未在 Mat 表上显示数据答案

【问题标题】：No error but not showing data on Mat table没有错误但未在 Mat 表上显示数据
【发布时间】：2020-06-19 02:11:54
【问题描述】：

我想将 php mysql 中的数据显示到我的角垫表中。我正在使用角度 CLI 8.1.0。以下是我的代码，任何人都可以帮助解决实际错误。我通过PHP和MYSQL制作了rest api，当我点击邮递员时，它以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;
  }

【问题讨论】：

试试：this.apiService.userList().subscribe(displayvendors=> { this.displayvendors=displayvendors; });
并从您的 html 中删除 async 管道
@BartoszTermena 没有用。没有结果
您是否从 html 中删除了 | async：<table mat-table [dataSource]="displayvendors | async" ... ？
@BartoszTermena 是的，我删除了

标签： angular typescript frontend

【解决方案1】：

如果您想通过异步管道使用 Observable Object 中的数组，请将您的代码更改为：

    export class VendorActionComponent {

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

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

【讨论】：

【解决方案2】：

将此添加到您的组件中

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

变量的类型应该是 MatTableDataSource

displayvendors: MatTableDataSource<any>

并将您从 API 调用中获得的数组分配给您的 displayvendors，如下所示。

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

这对我有用。想法是将您的数组转换为 mat-table 结构，然后是 Angular 材料

【讨论】：