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

我知道不会以这种方式禁用按钮，但是如果我在不应使用的路线上，则会禁用按钮的逻辑。因此，在点击隐形按钮时什么也不会发生。

角度-动态更改标签文本

3 个答案: