当我使用它不呈现* ngFor（角4）

我是新具有角4.我有2个部件分开app.components：home.component和product.component。我初始化了app.component.ts中产品的数组元素。我想通过使用* ngFor来显示home.component.html上的产品列表。它不会渲染我在home.component.html中设置的位置，但只有我打电话时才渲染。哪里有问题？当我使用它不呈现* ngFor（角4）

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { RouterModule } from '@angular/router'; 

import { AppComponent } from './app.component'; 
import { ProductComponent } from './product/product.component'; 
import { DetailsComponent } from './details/details.component'; 
import { HomeComponent } from './home/home.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    ProductComponent, 
    DetailsComponent, 
    HomeComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot([ 
     { 
     path: '', 
     pathMatch: 'full', 
     component: HomeComponent 
     }, 
     { 
     path: 'product', 
     component: ProductComponent 
     }, 
     { 
     path: 'details', 
     component: DetailsComponent 
     } 
    ]) 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app works!'; 

    products = [{ 
    titre:"titre1", 
    desc:"desc1" 
    },{ 
    titre:"titre2", 
    desc:"desc2" 
    },{ 
    titre:"titre3", 
    desc:"desc3" 
    }]; 
}

app.component.html

<router-outlet></router-outlet>

product.component.ts

import {Component, OnInit, Input} from '@angular/core'; 

@Component({ 
    selector: 'product', 
    templateUrl: './product.component.html', 
    styleUrls: ['./product.component.css'] 
}) 
export class ProductComponent implements OnInit { 

    @Input() titre:string; 
    @Input() description:string; 
    constructor() { } 

    ngOnInit() { 
    } 

}

个

product.component.html

<div> 
     <h5>{{titre}}</h5> 
     <p class="card-text">{{desc}}</p> 
    </div>

home.component.html

<div class="home"> 

    <div class="album text-muted"> 
    <div class="container"> 

    <div class="row"> 

     <product 
    class="col-md-4" 
    *ngFor="let p of products" 
    [description]="p.desc" 
    [titre]="p.titre"> 
     </product> 

     <!--<product></product>--> 

    </div> 

    </div> 
</div> 

</div>

来源

2017-06-05 Atom

在您home.component.ts定义products？ HomeComponent应该看起来像这样：

export class HomeComponent{ 
    products = [{ 
    titre:"titre1", 
    desc:"desc1" 
    },{ 
    titre:"titre2", 
    desc:"desc2" 
    },{ 
    titre:"titre3", 
    desc:"desc3" 
    }]; 
}

来源

2017-06-05 12:50:34

当我使用它不呈现* ngFor（角4）

回答

相关问题