Question

我正在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>

Answer 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

Answer 2

通过执行*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

无法使用* ngIf弹出窗口

2 个答案: