无法将数据从 .ts 渲染到 mat-table 或 angular 中的一般 html 文件 2

Question

service.ts

@Injectable()
export class ScanServeripsService {
    constructor(
          private http: HttpClient, private httpUtils: HttpUtilsService,
        public env: EnvService
     ) { }
    
    API_FILE_URL = this.env.apiUrl + '/api/something/';

    getPerFile(id: any, itemid: any): Observable<any> {
        if(servid & fileid) {
            return this.http.get(this.API_FILE_URL + '?id=' + `${id}` + '&itemid=' + `${itemid}`);
    }
}

.ts 文件

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MyService } from '../../_core/services';

export class SomeComponent implements OnInit {
    dataSource: any;
    itemID: any;
    displayedColumns = ['match', 'type']

    constructor(
        private ActivatedRoute: ActivatedRoute,
        private _router: Router,
        private myService: MyService
    ){}
    
    ngOnInit() {
        this.ActivatedRoute.queryParams.subscribe(paramas => {
            const id = paramas.file;
            this.itemID = paramas.itemid;
            this.myService.getPerFile(id, this.itemID).subscribe(res => {
                this.dataSource = res["data"]; // When i do console log .. I'm getting the correct result.
            });
        });
    }  
}

来自 api

的回复

[
{
   id: 1,
   match: 'Something',
   type: 'something'
},
{...},
{...}
]

html 文件


<ng-container mPortletBody>
            <div class="mat-table__wrapper">
                <mat-table class="lmat-elevation-z8" [dataSource]="dataSource" matSort matSortActive="id" matSortDirection="asc" matSortDisableClear *ngIf="dataSource">

                    <ng-container matColumnDef=""match>
                        <mat-header-cell *matHeaderCellDef style="width:70%;">Path</mat-header-cell>
                        <mat-cell *matCellDef="let customer" style="cursor:pointer;width:70%;" (click)="goPer(customer.id)">{{ customer.match}}</mat-cell>
                    </ng-container>
                    <ng-container matColumnDef="type">
                        <mat-header-cell *matHeaderCellDef  style="width:15%;">Entity</mat-header-cell>
                        <mat-cell *matCellDef="let customer" style="cursor:pointer;width:15%;">{{ customer.type}}</mat-cell>
                    </ng-container>

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

        </div>

</ng-container>

无法弄清楚我哪里做错了，我做错了什么。我完全按照医生提到的去做。当我执行控制台日志但无法在 html 文件中呈现时，从 api 获取结果。请帮帮我。问题已更新。

Angular material版本=6.4.6

Answer 1

我认为问题的发生是因为您还没有导入 matTableDataSource

所以尝试导入：import { MatTableDataSource } from '@angular/material'; 并更改行：dataSource: MatTableDataSource<any>;

并尝试更改行：this.dataSource = new MatTableDataSource(res.data);

无法将数据从 .ts 渲染到 mat-table 或 angular 中的一般 html 文件 2

Unable to render data from .ts to mat-table or in general html file in angular 2

angular2-template

angular