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：

更准确地说，NgIf是在@ angular / common。
的CommonModule中声明的
CommonModule提供了许多应用程序需要的常用指令，包括ngIf和ngFor。

BrowserModule导入CommonModule并重新导出它。实际效果是BrowserModule的导入器自动获取CommonModule指令。

刚刚在我的新模块中导入了该模块，它已经解决了。

2.0.0版本无法绑定到＆＃39; ngIf＆＃39;因为它不是“div”的已知属性。

1 个答案: