角度材料DataTable数据绑定

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中服务返回的控制台输出的screencap：

Answer 1

初始化:时，您使用的是=而不是displayedColumns。

更改

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

到

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

简化了代码的工作demo。

希望这可以解决表格中没有任何数据的问题。