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中不显示

回答

相关问题