如何在2个按钮之间进行交互(Angular)

Question

我有两个按钮，当它们被激活时，
显示"应显示三角形属性"；或"；shouldShapeBeShow"；。当我单击某个按钮时，相应按钮的颜色也会发生变化。不幸的是，目前的情况是，如果一个按钮被激活，我也激活了另一个按钮，两个内容都会显示给我。当然，我更喜欢如果一个被激活，那么另一个应该被停用。

我已经尝试了几种方法，但不幸的是，我未能在两个按钮之间创建交互。

有人告诉我如何禁用另一个按钮及其内容吗？

这是我的代码：

我的页面.TS

selectTriangleProperty(shownPropertiesNumber: number) {
this.arePropertiesOfTriangleVisible[shownPropertiesNumber] = !this.arePropertiesOfTriangleVisible[shownPropertiesNumber];
this.getStatusOfButtonDetailsActivation(shownPropertiesNumber);
}
shouldTrianglePropertyBeShown(shownPropertiesNumber: number) {
this.getStatusOfButtonDetailsActivation(shownPropertiesNumber);
return this.arePropertiesOfTriangleVisible[shownPropertiesNumber];
}
selectShapeInformation(shownShapeNumber: number) {
this.areShapeInformationVisible[shownShapeNumber] = !this.areShapeInformationVisible[shownShapeNumber];
this.getStatusOfButtonShapeActivation(shownShapeNumber);
}
shouldShapeBeShown(shownShapeNumber: number) {
this.getStatusOfButtonShapeActivation(shownShapeNumber);
return this.areShapeInformationVisible[shownShapeNumber];
}


getStatusOfButtonDetailsActivation(shownPropertiesNumber: number)
{
const propertyButtonActivated = document.getElementById('structure-properties-button');
const informationButtonActivated = document.getElementById('shape-information-button');
if(this.arePropertiesOfTriangleVisible[shownPropertiesNumber])
{
propertyButtonActivated.style.backgroundColor = '#9AD2C9';
}
else if(!this.arePropertiesOfTriangleVisible[shownPropertiesNumber])
{
propertyButtonActivated.style.backgroundColor = '#FFFFFF';
}
}
getStatusOfButtonShapeActivation(shownShapeNumber: number)
{
const informationButtonActivated = document.getElementById('shape-information-button');
if(this.areShapeInformationVisible[shownShapeNumber])
{
informationButtonActivated.style.backgroundColor = '#9AD2C9';}
else if(!this.areShapeInformationVisible[shownShapeNumber])
{
informationButtonActivated.style.backgroundColor = '#FFFFFF';
}
}

我的HTML

<ion-buttons>
<ion-button id="triangle-properties-button" class="table-button-green"
(click)="selectTriangleProperty(j)">
Details
</ion-button>
</ion-buttons>
<ion-buttons>  
<ion-button id="shape-information-button" class="table-button-white" (click)="selectBridgeInformation(j)">
Brückeninformationen
</ion-button>
</ion-buttons>
<ion-row *ngIf="shouldTrianglePropertyBeShown(j)" size="12" class="content-subrow" id="triangle-properties" >
<ion-col size="4" *ngFor="let property of triangle.triangleProperties" style="margin-top: 8px; background-color:#f9efef; ">
<div class="detailView__label">{{property.propertyName}}</div> 
<div class="detailView__text"> {{property.propertyValue}}</div>
</ion-col>
</ion-row>
<ion-row *ngIf="shouldShapeBeShown(j)" size="12" class="content-subrow" id="triangle-properties" >

<ion-row>

Answer 1

这对你有用吗：

HTML:

<ion-buttons>
<ion-button 
[disabled]="activateShape"
id="triangle-properties-button" 
class="table-button-green"       
(click)="selectTriangleProperty(j); activateShape=!activateShape;activateTriangle= false;">
Details
</ion-button>
</ion-buttons>
<ion-buttons>  
<ion-button 
[disabled]="activateTriangle"
id="shape-information-button" 
class="table-button-white"
(click)="selectBridgeInformation(j); activateTriangle=!activateTriangle; activateShape=false;">
Brückeninformationen
</ion-button>
</ion-buttons>

TS(作为您班级的属性(：

activateShape = false;
activateTriangle = false;

注意：如果工作正常，您可以移动"的所有逻辑；点击"；到ts.中的功能