PrimeNg DataList在Easy App中不顯示

我從PrimeNg網站上覆制了一個datalist的例子，但無法顯示數據。它只是說「找不到記錄」。 json文件位於正確的位置，雖然我不知道它是否從中提取數據。在我看來，HTML文件中的「值」並不知道從哪裏獲取數據。PrimeNg DataList在Easy App中不顯示

這裏是一個組件文件：

@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); 
     } 
    }

這是我的服務文件：

@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; }); 
    } 
}

這是我的模塊文件：

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 { }

這裏是我的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>

這裏是我喜歡的類型文件：

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

來源

2017-10-12 azmatrix

我已經像這樣輸入了primemg模塊。看看它是否有助於從'primeng/components/datatable/datatable'導入{DataTableModule}; 從'primeng/components/button/button'導入{ButtonModule};' –

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

在本節公佈。在ng-template內部，你並不是真的想要對Cars數據進行插值。如果這是您現在的實際代碼，則必須將其更改爲如下所示。

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

此外，我建議你檢查是否真的加載JSON數據。您可以簽入開發人員工具網絡選項卡。

來源

2017-10-12 16:32:24 gkrthk

PrimeNg DataList在Easy App中不顯示

回答

相關問題