Angular

Question

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

当前尝试：

<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 的尝试，但如果我这样做，我会得到一个丑陋的白色标签，如下所示：

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

Answer 1

默认情况下，您可以为标签设置文本。然后，当您在应用程序的特定路线上时，您可以通过 *ngIf 和您编写的函数隐藏该标签。

 <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);
    }

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

Angular - 动态更改标签文本

Angular - change text of label dynamically

typescript

angular-ng-if