角度材料数据表数据绑定

Question

我正在使用Angular Material并尝试获取DataTable使用Http响应对象。我有DataSource设置和表行正在填充，但没有内容显示在表中。我为集合中的每个对象获得一个空行条目，但是我可以使用Augury来查看数据以检查表属性。

以下是部分：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; 
 
import { DataSource } from '@angular/cdk'; 
 
import { ResponseSearchResult } from './response-search-result'; 
 
import { SearchService } from '../shared/search.service'; 
 
import { Observable } from 'rxjs/Observable'; 
 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
 
import 'rxjs/add/operator/map'; 
 
import 'rxjs/add/observable/of'; 
 
import 'rxjs/add/observable/merge'; 
 

 

 
@Component({ 
 
    selector: 'search-results', 
 
    templateUrl: './results.component.html', 
 
    styleUrls: ['./results.component.scss'] 
 
}) 
 

 
export class ResultsComponent implements OnInit { 
 
    displayedColumns: ["ResponseConditionName", "ResponseText", "RelatedLinks"]; 
 
    searchTerm: string; 
 
    templateItems: number[]; 
 
    loadingData: boolean; 
 
    searchResults: any = null; 
 
    dataSource: SearchDataSource | null; 
 

 
    constructor(private searchService: SearchService, private changeDetector: ChangeDetectorRef) { 
 
    } 
 

 
    ngOnInit() { 
 

 
    this.dataSource = new SearchDataSource(this.searchService); 
 

 
    this.searchService.loadingSearchResults.subscribe({ 
 
     next: (value) => this.loadingData = value 
 
    }); 
 
    } 
 
} 
 

 
export class SearchDataSource extends DataSource<any> { 
 
    constructor(private searchService: SearchService) { 
 
    super(); 
 
    } 
 

 
    subject = new BehaviorSubject<ResponseSearchResult[]>([]); 
 

 
    connect(): Observable<ResponseSearchResult[]> { 
 

 
    this.searchService.searchResults.subscribe({ 
 
     next: (value) => { 
 
     this.subject.next(value); 
 
     } 
 
    }); 
 
    return Observable.merge(this.subject); 
 
    } 
 

 
    disconnect() { 
 
    this.subject.complete(); 
 
    this.subject.observers = []; 
 
    } 
 
}

<div *ngIf="dataSource"> 
 
    <md-table #searchResultsTable [dataSource]="dataSource"> 
 
    <ng-container cdkColumnDef="ResponseConditionName"> 
 
     <md-header-cell *cdkHeaderCellDef> Name </md-header-cell> 
 
     <md-cell *cdkCellDef="let row"> {{row.ResponseConditionName}} </md-cell> 
 
    </ng-container> 
 
       
 
    <ng-container cdkColumnDef="ResponseText"> 
 
     <md-header-cell *cdkHeaderCellDef> Response </md-header-cell> 
 
     <md-cell *cdkCellDef="let row"> {{row.ResponseText}} </md-cell> 
 
    </ng-container> 
 
    
 
    <ng-container cdkColumnDef="RelatedLinks"> 
 
     <md-header-cell *cdkHeaderCellDef> RelatedLinks </md-header-cell> 
 
     <md-cell *cdkCellDef="let row"> 
 
     <a *ngFor="let link of row.RelatedLinks"> 
 
      {{link.LinkName}} 
 
     </a> 
 
     </md-cell> 
 
    </ng-container> 
 

 
    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> 
 
    <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row> 
 
    </md-table> 
 
</div>

这里正在由服务返回的数据对象：

export class ResponseSearchResult { 
    UnitName: string; 
    ResponseConditionName: string; 
    ResponseText: string; 
    RelatedLinks: RelatedLink[]; 
    NavigationUrl: NavigationUrl; 
    Owner: string; 
    WorkflowStatus: string; 
} 

，这里是服务本身：

import { Injectable } from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { SearchQuery } from '../search/search-query'; 
import { ResponseSearchResult } from '../results/response-search-result'; 

@Injectable() 
export class SearchService { 

    public searchResults: BehaviorSubject<ResponseSearchResult[]> = new BehaviorSubject<ResponseSearchResult[]>(null); 
    public loadingSearchResults: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(null); 

    constructor(private http: HttpClient) {} 

    submitResponseSearch(searchQuery: SearchQuery) { 
    this.loadingSearchResults.next(true); 
    let searchTypes = this.getSelectedSearchTypes(searchQuery); 

    this.http.get<ResponseSearchResult[]>(
     `/api/search/GetSearchResults?searchString=${searchQuery.searchTerm}&searchTypes=${searchTypes}`).subscribe(response => { 

     this.searchResults.next(response); 
     this.loadingSearchResults.next(false); 
    }); 
    } 

    getSelectedSearchTypes(searchQuery: SearchQuery) { 
    return searchQuery.searchTypes.filter(type => type.IsSelected).map(({ Name }) => Name).join(","); 
    } 


} 

这里是从SearchDataSource的服务回报控制台输出的撷取画面：

Answer 1

初始化displayedColumns当您使用:代替=。

变化

displayedColumns: ["ResponseConditionName", "ResponseText", "RelatedLinks"];

到

displayedColumns = ["ResponseConditionName", "ResponseText", "RelatedLinks"];

简化的工作代码的demo。

希望这可以解决表中不适用数据的问题。