無法使用* ngIf彈出窗口

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示例

作為一般說明，您可以使用單個屬性來解決它，並在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示例

Answer 2

通過執行*ngIf="part1"您實際上只是在檢查'part1'是否為true ，這意味着它是否存在。 但是，要查看選擇了哪個項目，您需要設置一個狀態變量，例如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' 。

順便說一句： <ng-container>允許您使用*ngIf ， *ngSwitch等指令，而無需創建新的DOM元素。 偉大為建立有條件。

您可以在官方文檔中閱讀所有這些內容