Html 角度，当一个元素为真时，如何使其他元素为假

当一个元素的条件为真时，我需要帮助使其他元素的条件为假，如果可能的话，一次只能使一个为真。我不确定我写的是对的。有人能帮我吗

showProduct:boolean=false；
showCustomer:boolean=false；
showSupplier:boolean=false；
如果（showProduct=true）{
this.showCustomer=false；
此.showSupplier=false；
}

是的，您可以像这样做：

(click)="showProduct=!showProduct;showCustomer=false;showSupplier=false;"

---

或

组件方面：

模板侧：

---

在创建虚拟对象obj和mainobject mainObj以在UI上绑定时，会出现类似的情况

showProduct: boolean = false;
showCustomer: boolean = false;
showSupplier

mainObj = {};
obj = {
    showProduct: false,
    showCustomer: false,
    showSupplier: false 
}

<a href="#" (click)="updateObj('showProduct')"></a>
<a href="#" (click)="updateObj('showCustomer')"></a>
<a href="#" (click)="updateObj('showSupplier')"></a>

function updateObj(prope){
    mainObj = Object.assign(obj, mainObj);
    mainObj[prope] = true;
}

<div *ngIf="mainObj.showProduct" align="center">
  <app-product></app-product>
</div>

<div *ngIf="mainObj.showCustomer" align="center">
  <app-customer></app-customer>
</div>

<div *ngIf="mainObj.showSupplier" align="center">
  <app-supplier></app-supplier>
</div>

showProduct:boolean=false；
showCustomer:boolean=false；
演出供应商
mainObj={}；
obj={
showProduct:false，
顾客：错，
供应商：错
}
函数updateObj（prope）{
mainObj=Object.assign（obj，mainObj）；
mainObj[prope]=真；
}

您可以更改代码的逻辑：

angular.copy

在angular v2+@Lalit Sachdeva使用对象中不可用。assign@Faly谢谢通知！

<a href="#" (click)="changeShowStatus('showProduct')"></a>
<a href="#" (click)="changeShowStatus('showCustomer')"></a>
<a href="#" (click)="changeShowStatus('showSupplier')"></a>


<div *ngIf="showStatus['showProduct']" align="center">
  <app-product></app-product>
</div>
<div *ngIf="showStatus['showCustomer']" align="center">
  <app-product></app-product>
</div>
<div *ngIf="showStatus['showSupplier']" align="center">
  <app-product></app-product>
</div>

showProduct: boolean = false;
showCustomer: boolean = false;
showSupplier

mainObj = {};
obj = {
    showProduct: false,
    showCustomer: false,
    showSupplier: false 
}

<a href="#" (click)="updateObj('showProduct')"></a>
<a href="#" (click)="updateObj('showCustomer')"></a>
<a href="#" (click)="updateObj('showSupplier')"></a>

function updateObj(prope){
    mainObj = Object.assign(obj, mainObj);
    mainObj[prope] = true;
}

<div *ngIf="mainObj.showProduct" align="center">
  <app-product></app-product>
</div>

<div *ngIf="mainObj.showCustomer" align="center">
  <app-customer></app-customer>
</div>

<div *ngIf="mainObj.showSupplier" align="center">
  <app-supplier></app-supplier>
</div>