PrimeNg DataList ne pas montrer dans Easy App

Question

Je copier l'exemple du site PrimeNg pour une datalist, mais ne peut l'obtenir pour afficher les données. Il dit simplement "Aucun enregistrement trouvé". Le fichier json est au bon endroit, même si je ne sais pas s'il tire des données ou non. Il me semble que "valeur" dans le fichier html ne sait pas où obtenir les données.

Voici un fichier de composants:

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app'; 
} 

export class DataListDemo implements OnInit { 

     cars: Car[]; 

     constructor(private carService: CarService) { } 

     ngOnInit() { 
      this.carService.getCarsLarge().then(cars => this.cars = cars); 
     } 
    } 

Voici mon fichier de service:

@Injectable() 
export class CarService { 

    constructor(private http: Http) {} 

    getCarsLarge() { 
     return this.http.get('/assets/cars-large.json') 
        .toPromise() 
        .then(res => <Car[]> res.json().data) 
        .then(data => { return data; }); 
    } 
} 

Voici mon fichier de module:

import { CarService } from './car.service'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { HttpModule } from '@angular/http'; 
import {DataListModule} from 'primeng/primeng'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, HttpModule, DataListModule 
    ], 
    providers: [CarService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Voici mon fichier html:

<!--The content below is only a placeholder and can be replaced.--> 
<div style="text-align:center"> 
    <h1> 
    Welcome to {{title}}! 
    </h1> 
    <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="> 
</div> 
<h2>Here are some links to help you start: </h2> 
<ul> 
    <li> 
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2> 
    </li> 
    <li> 
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2> 
    </li> 
    <li> 
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2> 
    </li> 
</ul> 
<p-dataList [value]="cars"> 
    <ng-template let-car pTemplate="item"> 
     Car content 
    </ng-template> 
</p-dataList> 

Voici mon fichier de type:

export interface Car { 
    vin; 
    year; 
    brand; 
    color; 
} 

Answer 1

<p-dataList [value]="cars"> <ng-template let-car pTemplate="item"> Car content </ng-template> </p-dataList>

Dans cette section, vous avez publié. Dans ng-template, vous n'essayez pas de faire une interpolation des données Cars. Si c'est le code que vous avez maintenant, vous devez le changer pour quelque chose comme ci-dessous.

<ng-template let-car pTemplate="item"> 
<div class="ui-g-12 ui-md-9 car-details"> 
      <div class="ui-g"> 
       <div class="ui-g-2 ui-sm-6">Vin: </div> 
       <div class="ui-g-10 ui-sm-6">{{car.vin}}</div> 

       <div class="ui-g-2 ui-sm-6">Year: </div> 
       <div class="ui-g-10 ui-sm-6">{{car.year}}</div> 

       <div class="ui-g-2 ui-sm-6">Brand: </div> 
       <div class="ui-g-10 ui-sm-6">{{car.brand}}</div> 

       <div class="ui-g-2 ui-sm-6">Color: </div> 
       <div class="ui-g-10 ui-sm-6">{{car.color}}</div> 
      </div> 
     </div> 

Je voudrais également vous suggérer de vérifier si les données JSON est vraiment chargé. Vous pouvez vérifier dans l'onglet réseaux d'outils de développement.