当我使用 *ngFor (Angular 4) 时它不会呈现答案

【问题标题】：It doesn't render when I use *ngFor (Angular 4)当我使用 *ngFor (Angular 4) 时它不会呈现
【发布时间】：2017-06-05 20:50:34
【问题描述】：

我是 angular 4 的新手。除了 app.components 之外，我有 2 个组件：home.component 和 product.component。我在 app.component.ts 中初始化了产品的数组元素。我想使用 *ngFor 在 home.component.html 上显示产品列表。它不会呈现我在 home.component.html 中设置的位置，但如果我只调用 .问题出在哪里？

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>

【问题讨论】：

标签： angular

【解决方案1】：

products 是否在您的 home.component.ts 中定义？ HomeComponent 应该如下所示：

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

【讨论】：