首页 文章

带有else块的Angular 2 - * ngIf给了我“Can 't bind to ' ngIfElse'”，但* ngIf没有其他块工作

提问于
浏览 次
5

直接来自angular.io的例子对我不起作用：

<button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
show = {{show}}
<br>
<div *ngIf="show; else elseBlock">Text to show</div>
<template #elseBlock>Alternate text while primary text is hidden</template>

相反，浏览器控制台错误：“无法绑定到'ngIfElse'，因为它不是'div'的已知属性 . ”

我的模块看起来像这样（我包括CommonModule）：

import { CommonModule } from '@angular/common';
import { NgModule }      from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    CommonModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

所以我不确定问题是什么？如果我只是从div中删除“; else elseBlock”，则* ngIf语句按预期工作 . 因此，我相信我的进口是正确的 . 任何帮助是极大的赞赏 .

angular ngif

2 回答

  • 2

    因此，在将package.json文件中的角度版本从2.4.0更改为4.0.0-beta.5后，我才开始工作 . 如果你看一下角度变化日志（https://github.com/angular/angular/blob/master/CHANGELOG.md），似乎ngIf的'else'部分甚至没有工作，直到角度4.0.0-beta.0

    我不确定为什么官方文档解释了如何使用'else'，因为在撰写本文时，最新的稳定版本甚至不支持* ngIf的'else'部分

    回复于
  • 0

    这将适用于Angular 4版本

    // ngIf / Else的语法

    <div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<template #elseBlock>Falsy condition</template>

    只需将角度版本从2升级到4，休息就可以了

    回复于

相关问题