我在* ngIf上出现错误任何想法可能出错?我正在使用Angular 2的最新版本(2.0.0).
Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngIf' since it isn't a known property of 'div'. (" </div> </div> <div class='row' [ERROR ->]*ngIf='listFilter'> <div class='col-md-6'> <h3>Filtered by: {{ listFilter"): EventlogComponent@12:25 Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. (" </div>
这是我的HTML我在下面的Component.ts中定义了listFilter
<div class='panel panel-primary'> <div class='panel-heading'> {{ pageTitle }} </div> <!-- Filter the eventlogs --> <div class='panel-body'> <div class='row'> <div class='col-md-2'>Filter by:</div> <div class='col-md-4'> <input type='text' [(ngModel)]='listFilter' /> </div> </div> <div class='row' *ngIf='listFilter'> <div class='col-md-6'> <h3>Filtered by: {{ listFilter }} </h3> </div> </div> <div class='has-error' *ngIf='errorMessage'>{{ errorMessage }}</div> <div class='table-responsive'> <table class='table' *ngIf='eventlogs && eventlogs.length'> <thead> <tr> <th>Event ID</th> <th>Tenant</th> <th>Composition</th> <th>Composition Execution</th> <th>Instrument</th> <th>Start Time</th> </tr> </thead> <tbody> <tr *ngFor='let eventlog of eventlogs | eventlogFilter:listFilter'> <td> <a [routerLink]="['/eventlog',eventlog.id]"> {{ eventlog.id }} </a> </td> <td>{{ eventlog.tenant }} </td> <td>{{ eventlog.composition }} </td> <td>{{ eventlog.compositionExecution }}</td> <td>{{ eventlog.instrument }}</td> <td>{{ eventlog.startTime }}</td> </tr> </tbody> </table> </div> </div> </div>
Component.ts,listFilter被声明
import { Component,OnInit} from '@angular/core'; import { IEventlog } from './eventlog'; import { EventlogService } from './eventlog.service'; @Component({ templateUrl: 'app/eventlogs/eventlog.component.html',styleUrls: ['app/eventlogs/eventlog.component.css'] }) export class EventlogComponent implements OnInit { pageTitle: string = 'Monitor Event Log'; listFilter: string = ' '; errorMessage: string; eventlogs: IEventlog[]; constructor(private _eventlogService: EventlogService) { } ngOnInit(): void { this._eventlogService.getEventlogs() .subscribe( eventlogs => this.eventlogs = eventlogs,error => this.errorMessage = <any>error); } }
解决方法
对于其他任何人来到这里同样的问题,我开始把我的所有组件放在功能模块中,所以我带来了相同的错误,谷歌搜索后发现这在
angular official docs:
More accurately,NgIf is declared in CommonModule from @angular/common.
CommonModule contributes many of the common directives that applications need including ngIf and ngFor.
BrowserModule imports CommonModule and re-exports it. The net effect is that an importer of BrowserModule gets CommonModule directives automatically.
刚刚在我的新模块中导入了该模块,它就解决了.