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

我现在正在尝试angular2。我想在视图中显示所有产品列表。我从Java Play服务器获得的产品列表。但是在我的angular2视图中，其显示错误无法绑定ngFor。 console.log以Object数组形式显示所有数据。那意味着我的角度组件可以从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();
}

}

产品服务

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响应片段

[{"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"},......]

最佳答案

不要在BrowserModule之类的功能模块中导入ProductsModule，而只能在根模块AppModule中将其导入。

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

// ProductsModule

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

// AppModule

@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中导入。

那会工作的。