angular2 ngfor 模板中的对象数组错误

Question

我现在正在尝试使用 angular2。我想在视图中显示所有产品列表。我从 Java Play 服务器获得的产品列表。但在我的 angular2 视图中，它的显示错误无法绑定 ngFor。 console.log 以对象形式显示所有数据。这意味着我的角度组件可以从 java 服务器获取数据。这是我的方法。

products.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpModule } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Logger } from 'angular2-logger/core';

import { ProductService }         from './products.service';
import { ProductsModule }         from './products.module';

@Component({
    selector: 'products-cmp',
    templateUrl:    'assets/app/portal/common/products/products.component.html',
providers: [ ProductService, ProductsModule ],
})

export class ProductsComponent implements OnInit {
    private products: Object;
    private keys: String[];
    constructor(
        private productService: ProductService,
    ) {
    }

    public getAllProducts() {
      this.productService.getProducts()
        .subscribe(
            products => {
                this.products = products;
                //this.keys = Object.keys(this.products);
                console.log(this.products);
                //console.log(this.keys);
            },
        );
}

public ngOnInit() {
    this.getAllProducts();
}

}

products.service.ts

import { Injectable }    from '@angular/core';
import { Headers, Http, Response, RequestOptions } from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';

@Injectable()
export class ProductService {
// private headers = new Headers({'Content-Type': 'application/json'});
private productsUrl = 'http://localhost:9000/api/products';
constructor(private http: Http) { }

public getProducts() {
    return this.http.get(this.productsUrl)
        .map(res => res.json())
        .catch(error => {
            return Observable.throw(error);
        });

}

}

products.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PipesModule } from '../../../pipes/pipes.module';

@NgModule({
    imports: [ PipesModule, BrowserModule ],
    exports: [ BrowserModule, PipesModule ],
})
export class ProductsModule { }

products.component.html

<div class="main-content">

<div class="container-fluid">

    <div class="row" *ngFor="let product of products"  >
        {{product.productName}}
    </div>

</div>
</div>

敲了我几个小时的头。如果有人能帮我解决这个问题，那就太好了

** 这是我获取数据的示例

Array[110]
[0 … 99]
0:Object
  actualPrice:10
  companyProductId:"1"
  estimateUnitdPrice:11
  id:"fde96cc0-a9de-48d8-9229-e62088f8e570"
  productImageUrl:null
  productName:"TEST"
  whenCreated:1488466833952
1:Object
2:Object
3:Object

这是 app.module.ts

import { NgModule }      from '@angular/core';
import { CommonModule }      from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { Logger } from 'angular2-logger/core';
import { PipesModule } from './pipes/pipes.module';

import { AppComponent }   from './app.component';
import { PortalComponent } from './portal/portal.component';

import { PortalModule } from './portal/portal.module';
import { SidebarModule } from './sidebar/sidebar.module';
import { FooterModule } from './shared/footer/footer.module';
import { NavbarModule} from './shared/navbar/navbar.module';

@NgModule({
imports:      [
    BrowserModule,
    CommonModule,
    HttpModule,
    FormsModule,
    PortalModule,
    SidebarModule,
    NavbarModule,
    FooterModule,
    RouterModule.forRoot([]),
],
declarations: [ AppComponent, PortalComponent ],
bootstrap:    [ AppComponent ],
providers:      [ Logger, { provide: LocationStrategy, useClass: HashLocationStrategy } ],
})
export class AppModule { }

这里我添加了来自服务器的 json 响应的 sn-p

[{"id":"fde96cc0-a9de-48d8-9229-e62088f8e570","version":1,"whenCreated":1488466833952,"whenUpdated":1488466833952,"productName":"TEST","shopReference":"ALDI_SUD","estimateUnitdPrice":11.0,"productImageUrl":null,"actualPrice":10.0,"units":1,"companyProductId":"1"},{"id":"6d1d231a-cfbd-4040-abd6-fb393974cc59","version":1,"whenCreated":1488467046104,"whenUpdated":1488467046104,"productName":"TEST","shopReference":"ALDI_SUD","estimateUnitdPrice":11.0,"productImageUrl":null,"actualPrice":10.0,"units":1,"companyProductId":"1"},......]

Answer 1

尝试导入CommonModule 而不是BrowserModule。请参阅文档中的此部分：https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-browser-vs-common-module

Answer 2

不要在ProductsModule等功能模块中导入BrowserModule，只在根模块AppModule中导入。

在这种情况下将CommonModule 添加到功能模块的imports 属性ProductsModule 并将其从AppModule 的imports 属性中删除，因为BrowserModule 本身导出CommonModule 所以我们不需要再次导入。

// 产品模块

import { NgModule }      from '@angular/core';
import { CommonModule }      from '@angular/common';
@NgModule({
    imports: [ CommonModule ],
    declarations : [ ProductsComponent ],
    exports: [ ProductsComponent ]
})
export class ProductsModule { }

//应用模块

@NgModule({
imports:      [
    ProductsModule,
    BrowserModule,
    HttpModule,
    FormsModule,
    PortalModule,
    SidebarModule,
    NavbarModule,
    FooterModule,
    RouterModule.forRoot([]),
],
declarations: [ AppComponent, PortalComponent ],
bootstrap:    [ AppComponent ],
providers:      [ Logger, { provide: LocationStrategy, useClass: HashLocationStrategy } ],
})
export class AppModule { }

ProductsComponent 必须在ProductsModule 中声明和导出，ProductsModule 应在AppModule 中导入。

这会奏效的。