Easy App 中未显示 PrimeNg DataList

Question

我正在从 PrimeNg 网站复制示例以获取数据列表，但无法显示数据。它只是说 "No records found"。 json 文件位于正确的位置，但我不知道它是否从中提取数据。在我看来 html 文件中的 "value" 不知道从哪里获取数据。

这是一个组件文件：

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

Answer 1

<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 数据是否真的已加载。您可以在开发人员工具网络选项卡中查看。

Easy App 中未显示 PrimeNg DataList

PrimeNg DataList not showing in Easy App

angular

primeng