Question

直接来自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语句按预期工作。因此，我相信我的进口是正确的。非常感谢任何帮助。

Answer 1

所以我在将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'部分

Answer 2

这适用于Angular 4版本

// ngIf / Else的语法

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

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

带有else块的Angular 2 - * ngIf给我“无法绑定到'ngIfElse'”，但* ngIf没有else块工作

2 个答案: