Angular - 动态更改 label 的文本

Question

问题：
如何根据条件更改 label 的文本？ 就我而言，如果我在我的应用程序中的特定路线上，我想要一个空白的 label。

当前尝试：

<RadSideDrawer allowEdgeSwipe="false">
    <StackLayout tkDrawerContent class="drawer-container" VerticalOptions=LayoutOptions.FillAndExpand>
        <GridLayout rows="2*,2*,*,*,*,3*,*,*,*,*,4*" columns="*,6*">
            <Label row="0" col="0" class="fa drawerContainerSymbol" text="&#xf00d;" (tap)="onCloseDrawer()"></Label>
            <Label row="1" col="0" class="fa drawerContainerSymbol" text="&#xf053;" *ngIf="!onMonitorlist()" (tap)="onGoBack()"></Label>
            <Label row="2" col="0" class="fa drawerContainerSymbol" text=""></Label>
            ...
        </GridLayout>
    </StackLayout>
    <StackLayout tkMainContent>
        <page-router-outlet></page-router-outlet>
    </StackLayout>
</RadSideDrawer>

检查我是否在特定路线上的代码：

    onMonitorlist(){
        if(this.router.url === '/monitorliste'){
            return true;
        } else{
            return false
        }
    }

这是我对*ngIf的尝试，但如果我这样做，我会得到一个丑陋的白色 label，如下所示：

如果您对如何在 label 上动态显示文本有一个很好的解决方案，请告诉我！
干杯!

Answer 1

您可以默认为您的 label 设置文本。 然后，当您在应用程序中的特定路线上时，您可以通过 *ngIf 和您编写的 function 隐藏 label。

 <Label *ngIf="onMonitorlist()"> your text </Label>

 onMonitorlist(){
        if(this.router.url === '/monitorliste'){
            return false;
        } else{
            return true
        }
    }

Answer 2

我认为您应该在您的条件下使用ngStyle而不是ngIf 。

<Label [ngStyle]="{'display': onMonitorlist() ? 'block' : 'none'}"> your text </Label>

Answer 3

我最终使用[ngClass]="{'drawerContainerTransparent': onMonitorlist()===true}"

.drawerContainerTransparent{
        background: rgb(0,204,153);
        background-color: #00CC99;
        color: rgb(0,204,153);
    }

我知道按钮不会以这种方式被禁用，但是如果我在不应该使用它的路线上，我禁用了按钮的逻辑。 因此，点击隐形按钮时没有任何反应。