angularjs - 2.0.0 版本无法绑定(bind)到 'ngIf'，因为它不是 'div' 的已知属性

Question

我在 *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);
    }

}

Answer 1

对于因同样问题来到这里的其他人，我开始将我的所有组件放在功能模块中，所以我遇到了同样的错误，在谷歌搜索后刚刚在 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.

刚刚将该模块导入我的新模块中，它就解决了。