2.0.0バージョン 'ngIf'は 'div'の既知のプロパティではないため、バインドできません。

Question

何か問題があれば、* ngに間違いがありますか？私はlistFilterがあるComponent.ts

<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を定義している。ここには私のHTMLで

2.アンギュラ

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> 

の最新バージョン（2.0.0）を使用しています同じ問題のためにここに来て、誰のために

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

を宣言し、私は同じエラーで来たので、機能モジュール内のすべての私のコンポーネントを置くために始めについてグーグルでの後だけでこれを見つけました：

より正確には、NgIfはCommonModuleの@ angular/commonから宣言されています。

CommonModuleは、ngIfやngForなど、アプリケーションで必要となる多くの共通ディレクティブに貢献します。

BrowserModuleはCommonModuleをインポートして再エクスポートします。正味の効果は、BrowserModuleのインポータがCommonModuleディレクティブを自動的に取得することです。

このモジュールを新しいモジュールにインポートして解決しました。