加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 2.0.0版本无法绑定到’ngIf’,因为它不是’div’的

发布时间:2020-12-17 17:07:57 所属栏目:安全 来源:网络整理
导读:我在* 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/divdiv class='row' [ERROR -]*ngIf=
我在* 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.

刚刚在我的新模块中导入了该模块,它就解决了.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读