Angulaire 2/4 PrimeNg DataList vide

Question

J'essaie d'implémenter une liste de données PrimeNg dans mon application. J'ai du mal à comprendre pourquoi rien n'est imprimé.

Voici mon 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> 

Voici mon dossier-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, 
      ); 
    } 
} 

Voici mon électrophones 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; 
    } 

J'essaie les données de l'appel api et affiche les résultats en utilisant p-datalist.

Answer 1

Je pense que vous devez ajuster votre fonction .map

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