*ngFor 不适用于 html table(angular 2)

Question

html ngFor 不适用于 html table

<!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 { }

Answer 1

您只是在 *ngFor

中缺少 let 关键字

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

Answer 2

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

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


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

*ngFor 不适用于 html table(angular 2)

*ngFor not working for html table(angular 2)

html-table

ngfor

angular