无法使用* ngIf弹出窗口

时间:2018-07-28 07:37:55

标签: javascript angular primeng

我正在angular中用primeng弹出。弹出窗口的内容取决于由单选按钮控制的两个标志。如果一个为真,则必须呈现特定的HTML;如果其他为真,则必须呈现另一部分。但是,如果其中一个是正确的,则弹出窗口中不会清除的其他部分。我的代码是这样的:

在.ts文件中:

part1: boolean = false;
part2: boolean = false;

makeP1True() {
    this.part1=true;
    this.part2=false;
}

makeP2True() {
    this.part2=true;
    this.part1=false;
}

在HTML文件中:

<p-radioButton name="groupname" value="Part1" (onClick)="makeP1True()"></p-radioButton>

<p-radioButton name="groupname" value="Part2" (onClick)="makeP2True()"></p-radioButton>

<div *ngIf="part1">
    Show Part 1
 </div>

<div *ngIf="part2">
    Show Part 2
 </div>

2 个答案:

答案 0 :(得分:1)

您没有示例中的part2属性

part1: boolean = false;
part1: boolean = false; // just name it to part2

模板

<p-radioButton name="groupname" [value]="Part1" label="Part1" (onClick)="makeP1True()"></p-radioButton>
<p-radioButton name="groupname" [value]="Part2" label="Part2" (onClick)="makeP2True()"></p-radioButton>

<div *ngIf="part1">
    Show Part 1
 </div>

<div *ngIf="part2">
    Show Part 2
 </div>

组件

export class AppComponent {
  part1: boolean = false;
  part2: boolean = false;

  makeP1True() {
    this.part1 = true;
    this.part2 = false;
  }

  makeP2True() {
    this.part2 = true;
    this.part1 = false;
  }
}

stackblitz example

  

作为一般说明,您可以使用单个属性来解决它,然后继续   p-radioButton切换值

组件

export class AppComponent {
  part1: boolean ;
}

模板

<p-radioButton name="groupname" label="part1" [value]="true" [(ngModel)]="part1"></p-radioButton>
<p-radioButton name="groupname" label="part2" [value]="false" [(ngModel)]="part1"></p-radioButton>

<div *ngIf="part1 === true">
    Show Part 1
</div>

<div *ngIf="part1 === false">
    Show Part 2
</div>

stackblitz example with single variable

答案 1 :(得分:1)

通过执行*ngIf="part1",您实际上只是在检查'part1'是否真实,这意味着它是否存在。但是,要查看选择了哪个项目,您需要设置一个状态变量,例如selected

我建议您使用单个函数和ngSwitch简化此过程。这是一个教程:https://www.tektutorialshub.com/angular-2-ngswitch-directive/

使用[ngSwitch]指令,您可以指定要计算的表达式。使用*ngSwitchCase,您可以指定匹配器。语法将最接近您的代码。

它看起来像这样:

HTML

<p-radioButton name="groupname" 
               value="Part1" 
               (onClick)="setPart('part1')">

</p-radioButton>

<p-radioButton name="groupname" 
               value="Part2" 
               (onClick)="setPart('part2')">
</p-radioButton>

<ng-container [ngSwitch]="selected">
  <div *ngSwitchCase="'part1'">
      Show Part 1
  </div>

  <div *ngSwitchCase="'part2'">
      Show Part 2
  </div>
</ng-container>

TS

public selected: string;

public setPart(id: string): void {

     this.selected = id;
}

在这种情况下,两个div都执行以下操作:*ngIf = "selected === 'partX'

BTW:<ng-container>使您可以使用诸如*ngIf*ngSwitch之类的指令,而无需创建新的DOM元素。伟大为建立有条件。

您可以阅读所有in the official docs