在 Angular 2 中使用 *ngIf 控制 3 个以上的 div

Question

是否可以在 Angular 2 中使用 *ngIf 控制 3 个 div？

我可以做类似

的事情吗

<div *ngIf="planState=plan1">show plan 1</div>

<div *ngIf="planState=plan2">show plan 2</div>

<div *ngIf="planState=plan3">show plan 3</div>

谢谢！

Answer 1

您只是错过了比较运算符，它应该是 == 而不是 =。

您也可以使用[隐藏]。建议在 [hidden]

之前使用 ngIf

<div *ngIf="planState==plan1">show plan 1</div>

或

<div [hidden]="planState!=plan1">show plan 1</div>

Answer 2

我已将您的 plunker 代码更新如下，并且有效：

@Component({
  selector: 'my-app',
  template: `
  <button (click)="OnButtonClick(1)">select - 1</button>
  <button (click)="OnButtonClick(2)">select - 2</button>
  <button (click)="OnButtonClick(3)">select - 3</button>
  <h5>You selected : {{value}}</h5>

  <hr>
  <div>
     <div *ngIf="value==1">1. Template - <b>{{value}}</b> </div>
     <div *ngIf="value==2">2. Template - <b>{{value}}</b> </div>
     <div *ngIf="value==3">3. Template - <b>{{value}}</b> </div>
     <div *ngIf="value==0">Default Template</div>

  </div>
  `,

})
export class AppComponent {
  value:number=0;

  OnButtonClick(value)
  {
    this.value=value
  }
}

Answer 3

你可以在angular2中使用*ngIf，相当于angular

的ng-if

在 Angular 2 中使用 *ngIf 控制 3 个以上的 div

controll more then 3 divs with *ngIf in Angular 2

angular-ng-if

angular