html ng不适用于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');
});
}
}
我的申请中断的错误信息,请您告诉我我做了哪些更改才能使其正常工作
App Module我在我的应用程序中只使用了一个模块
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 { }
您需要为指令CommonModule
导入*ngFor
并使用let
作为garth74说:
import { CommonModule } from '@angular/common';
@NgModule({
imports: [ CommonModule ], // use 'imports' not 'import', s is mandatory
...
})
你只是错过了let
中的*ngFor
关键字
<tr *ngFor="let category of categoriesInfo" >