Angular 2/4 PrimeNg 数据列表空答案

【问题标题】：Angular 2/4 PrimeNg DataList EmptyAngular 2/4 PrimeNg 数据列表空
【发布时间】：2017-10-12 03:09:43
【问题描述】：

我正在尝试在我的应用中实现 PrimeNg 数据列表。无法弄清楚为什么没有打印任何内容。

这是我的record-display.component.html：

 <p-dataList [value]="sources" [rows]="5" emptyMessage="No Sources Added">
  <p-header>Sources</p-header>
  <ng-template let-source pTemplate="item">
    <div class="ui-g ui-fluid car-item">
      <div class="ui-g-12 ui-md-12">
        <p>Test</p>
      </div>
    </div>
  </ng-template>
</p-dataList>

这是我的record-display.component.ts：

import { RecordDisplayService } from './record-display.service';
import { Source } from '../../../../objects/source';
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-record-display',
  templateUrl: './record-display.component.html',
  styleUrls: ['./record-display.component.css']
})
export class RecordDisplayComponent implements OnInit {

  sources: any[];
  allSources: Source[];

  // @Input('list-items') listViewSets: any;
  constructor(private recordDisplayService: RecordDisplayService) {

  }

  ngOnInit() {
    this.getSources();
    this.recordDisplayService.getSources().subscribe(sources => {this.sources = sources;});

  }

  getSources() {
    this.recordDisplayService.getSources()
        .subscribe(
            data => this.allSources = data,
           );
  }
 }

这是我的record-display.service.ts

import { getSourceNodes } from '@angular/cli/lib/ast-tools';
import { Http, Response } from '@angular/http';
import { CREATE_COMMITMENT, Endpoint, GET_CREATE_ITEM_URL, QUERY_DOCUMENT_LINK } from '../../../../_config/links-config';
// import { Tag } from '../objects/tag';
import { HttpService } from '../../../connection/http.service';
import { Commitment } from '../../../../objects/commitment';
import { Source } from '../../../../objects/source';
import { Statement } from '../../../../objects/statement';
import { Injectable } from '@angular/core';
import { Subscription, Subject, Observable } from 'rxjs/Rx';
import { GET_BY_PARTY_BODY, GET_BY_PARTY_URL, GET_DELETE_ITEM_URL, CONSTRUCT_QUERY_OBJECT } from "../../../../_config/links-config";

@Injectable()
export class RecordDisplayService {


  private subject = new Subject<any>();
  constructor(private http: Http) {
  }


    getSources(): Observable<Source[]> {
        return this.http.get('.../api/V1/Source/GetAll')
                    .map(this.extractData)
                    .catch(this.handleError);
    }

    private extractData(res: Response) {
        let body = res.json();
        return body;
    }

我正在尝试从 api 调用中获取数据并使用 p-datalist 显示结果。

【问题讨论】：

您是否验证过 HTTP 请求正在返回数据？尝试在订阅 ngOnInit() { this.getSources(); 的处理程序上洒一个 console.log this.recordDisplayService.getSources().subscribe(sources => {this.sources = sources; console.log(sources); }); }
这是我得到的：订阅者 {关闭：false，_parent：null，_parents：null，_subscriptions：Array(1)，syncErrorValue：null，...}
控制台中的错误是什么？尝试控制台将您的数据也记录在服务中的 .map 函数中。
我正在提取数据，因为我可以在控制台中看到它，但它不会显示在模板上

标签： angular typescript primeng

【解决方案1】：

我认为你需要调整你的 .map 函数

  getSources(): Observable<Source[]> {
            return this.http.get('.../api/V1/Source/GetAll')
                        .map(data =>  {return this.extractData(data);})
                        .catch(this.handleError);
        }

【讨论】：