Question

我试图在我的应用中实现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显示结果。

Answer 1

我认为您需要调整.map功能

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

Angular 2/4 PrimeNg DataList为空

1 个答案: