Question

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

showProduct: boolean = false;
showCustomer: boolean = false;
showSupplier: boolean = false;

if (showProduct = true) {
  this.showCustomer = false;
  this.showSupplier = false;
}

<a href="#" (click)="showProduct=!showProduct"></a>
<a href="#" (click)="showCustomer=!showCustomer"></a>
<a href="#" (click)="showSupplier=!showSupplier"></a>

<div *ngIf="showProduct" align="center">
  <app-product></app-product>
</div>

<div *ngIf="showCustomer" align="center">
  <app-customer></app-customer>
</div>

<div *ngIf="showSupplier" align="center">
  <app-supplier></app-supplier>
</div>

如果需要更多代码段，请与我们联系。提前谢谢。

Answer 1

您可以更改代码的逻辑：

＆＃13;

 try {
    mLocationManager.requestLocationUpdates(
            LocationManager.GPS_PROVIDER,
            <your_update_interval>,
            LOCATION_DISTANCE,
            this
    );
 } catch (java.lang.SecurityException ex) {
    Log.d(TAG, "fail to request location update, ignore", ex);
 }

＆＃13;

在您的组件类中：

<a href="#" (click)="show='product'">Show product</a>
<a href="#" (click)="show='customer'">Show customer</a>
<a href="#" (click)="show='supplier'">Show supplier</a>

<div *ngIf="show==='product'" align="center">
  <app-product></app-product>
</div>

<div *ngIf="show==='customer'" align="center">
  <app-customer></app-customer>
</div>

<div *ngIf="show==='supplier'" align="center">
  <app-supplier></app-supplier>
</div>

Answer 2

是的，你可以这样做：

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

OR

组件方：

showStatus = {
    showProduct : true;
    showCustomer : false;
    showSupplier : false;
}

changeShowStatus(changeBlock) {
    for(let block in this.showStatus) {
        if(block === changeBlock) {
            this.showStatus[block] = !this.showStatus[block];
        } else {
            this.showStatus[block] = false;
        }
    }
}

模板方：

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

Answer 3

在创建虚拟对象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>

Angular，当一个元素为true时如何使其他元素为false

3 个答案: