Angular Nativescript 可见性默认为 true，即使变量已初始化答案

【问题标题】：Angular Nativescript visibility defaults to true, even when variable is initializedAngular Nativescript 可见性默认为 true，即使变量已初始化
【发布时间】：2018-01-19 13:49:10
【问题描述】：

有没有办法在 Nativescript 中默认“隐藏”一个元素？

我的组件中有

export class HouseholdContactComponent{
  private isLoading = true
}

在我的 xml 中

<StackLayout [visibility]="isLoading ? 'collapse' : 'visible'">
  <Label text="Hi there"></Label>
</StackLayout>

使用此代码，屏幕会闪烁“您好”消息，然后消失。

【问题讨论】：

为什么不使用ngIf？
我使用了您共享的代码并解决了我的问题。感谢您的提问；-)

标签： angular nativescript angular2-nativescript

【解决方案1】：

您应该使用 Angular *ngIf 指令，而不是使用 [visibility] 属性。

<StackLayout *ngIf="!isLoading">
    <Label text="Hi there"></Label>
</StackLayout>

附带说明，为了绑定到属性属性并将其绑定到插值 Angular 需要在其前面加上 attr，例如，您需要编写 [attr.visibility] 而不仅仅是 [visibility] .

【讨论】：

【解决方案2】：

使用*ngIf directive。如果变量值为true，它将呈现。

例如：

//HTML
<Button text="Show/hide block" (tap)="onTap()" class="btn btn-primary btn-active"></Button>
<GridLayout *ngIf="isVisible" class="bg-primary" borderRadius="2" height="300"></GridLayout>

//Component
...
    onTap() {
        if (this.isVisible) {
            this.isVisible = false;
        } else  {
            this.isVisible = true;
        }
    }
...

【讨论】：