*ngFor 不适用于 html 表（角度 2）答案

【问题标题】：*ngFor not working for html table(angular 2)*ngFor 不适用于 html 表（角度 2）
【发布时间】：2017-06-01 00:09:54
【问题描述】：

html ngFor 不适用于 html 表格

<!DOCTYPE html>
<html>

<body>
    <div class="row">
        <div class="col-xs-12 col-md-offset-4">
            <table  class="table table-striped">
                <tr *ngFor="category of categoriesInfo" >
                    <td data-title="'Name'">
                        <a>{{category.CategoryName}}</a>
                    </td>
                    <td>
                        <button type="button" class="btn btn-sm">Delete</button>
                    </td>
                </tr>
            </table>
        </div>

    </div>
</body>
</html>

组件我正在从数据库中获取数据但无法进行 ngFor ，请在下面查找错误信息

import { Component,OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { CategoriesService } from './categories.component.service';
import { EventsEmitter } from '../../../assets/scripts/services/eventsEmitter';

@Component({
    selector: 'categories',
    templateUrl: 'app/components/admin/categories/categories.component.html',
    styleUrls: ['app/components/admin/categories/categories.component.css'],
    providers: [CategoriesService]
})
export class CategoriesComponent {
    categoriesInfo: any;

    constructor(
        private router: Router,
        private categoriesService: CategoriesService,
        private eventsEmitter: EventsEmitter) {
    }

    ngOnInit() {
        this.getCategoriesResource();
    }

    getCategoriesResource() {
        this.categoriesService.getCategoriesResource()
            .subscribe(response => {
                debugger;
                this.categoriesInfo = response;
            },
            error => {
                this.eventsEmitter.broadcast('Error', 'Error Occured');
            });
    }


}

错误信息 我的应用程序中断了，你能告诉我我做了哪些更改才能使其正常工作

应用模块 我在我的应用程序中只使用了一个模块

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { HttpModule, JsonpModule, Http, RequestOptions, XHRBackend, RequestOptionsArgs, Response, ConnectionBackend} from '@angular/http';
import { AppRoutingModule } from './app.routes';

import { AppComponent }  from './app.component';
import { CategoriesComponent } from './components/admin/categories/categories.component';


import { LoadingInterceptor } from './assets/scripts/services/loadingInterceptor';
import { EventsEmitter } from './assets/scripts/services/eventsEmitter';
import { ToasterModule} from 'angular2-toaster';

@NgModule({
    imports: [AppRoutingModule, BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, JsonpModule, ToasterModule ],
    declarations: [AppComponent, CategoriesComponent],
    bootstrap: [AppComponent],
    providers: [EventsEmitter,LoadingInterceptor,
        {
           provide: Http,
           useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions, eventsEmitter: EventsEmitter) => new LoadingInterceptor(xhrBackend, requestOptions, eventsEmitter),
           deps: [XHRBackend, RequestOptions,EventsEmitter]
        },{ provide: LocationStrategy, useClass: HashLocationStrategy }]
})
export class AppModule { }

【问题讨论】：

标签： angular html-table ngfor

【解决方案1】：

您只是缺少*ngFor 中的let 关键字

<tr *ngFor="let category of categoriesInfo" >

【讨论】：

【解决方案2】：

您需要为指令*ngFor 导入CommonModule 并使用let，如garth74 所说：

import { CommonModule } from '@angular/common';


@NgModule({
  imports: [ CommonModule ],  // use 'imports' not 'import', s is mandatory
  ...
})

【讨论】：