Question

我正在尝试使用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();
}

}

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

[{"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

请勿在{{1}}等功能模块中导入<ListBox ItemsSource="{Binding Items}" MinHeight="100" TabIndex="0" x:Name="LB"> <ListBox.ContextMenu> <ContextMenu> <MenuItem Header="Foo" Command="{Binding ContCommand}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}, Path=PlacementTarget.SelectedItem}"/> </ContextMenu> </ListBox.ContextMenu> </ListBox>，只能在根模块BrowserModule中导入。

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

// ProductsModule

BrowserModule

//的AppModule

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。

那会起作用。

angular2 ngfor对象数组在模板中出错

2 个答案: