如何根据角度 6 中的单选按钮选择显示/隐藏 div？

Question

我的 HTML 文件，

  <input type="radio" id="com" name="communication" value="full" (click)= "function(1)">
   <input type="radio" id="com2" name="communication" value="half" (click)= "function(2)">
   <input type="radio" id="com3" name="communication" value="oth" (click)= "function(3)">

  <div id="Flag1" [disabled]="Flag1" [(ngModel)]="Flag1" ngDefaultControl>

  some content....A
  </div>
  <div id="Flag2" [disabled]="Flag2" [(ngModel)]="Flag2" ngDefaultControl>

  some content....B
  </div>
  <div id="Flag3" [disabled]="Flag3" [(ngModel)]="Flag3" ngDefaultControl>

  some content....C
  </div>

我的 ts 文件：

Flag1=false;
Flag2=false; 
Flag3=false; 
function(x) {
if(x==1){
    alert("inside 1");
  this.Flag1=false;
  this.Flag2=false;
  this.Flag3=false;
}
else if(x==2){
    alert("inside 2");
  this.Flag1=false;
  this.Flag2=false;
  this.Flag3=false;

}
else if(x==3){
    alert("inside 3");
  this.Flag1=true;
  this.Flag2=true;
  this.Flag3=true;
 }
}

如果我点击第一个和第二个收音机 btn，我需要隐藏所有其他 div。如果我单击第三个 btn，我需要显示所有 div。但这似乎不会影响我的 html 页面。谁能告诉我如何在 Angular 6 中做到这一点？

Answer 1

使用*ngIf

<div *ngIf="Flag1" id="Flag1" [disabled]="Flag1" [(ngModel)]="Flag1" ngDefaultControl>

  some content....A
</div>

另外，删除disabled和ngModel，我猜这没什么用。