Question

我想通过home.component.ts触发* ngIf函数。

html

<GridLayout class="page">
<GridLayout row="0" rows="*, 2*, *">
    <GridLayout width="57%" row="0" horizontalAlignment="center" verticalAlignment="center">
       <button (click)="test()" text="testbutton"></button>
    </GridLayout>
    <GridLayout class="carousel-item-circle" row="1" horizontalAlignment="center" verticalAlignment="center">
        <label class="fa carousel-item-icon" text="&#xf130;" textWrap="true"></label>
    </GridLayout>
    <GridLayout *ngIf="testi" width="49%" row="2" horizontalAlignment="center" verticalAlignment="center">
        <Label class="text-color-blue opensans-regular carousel-item-desc" text="Mikrofon zum Sprechen antippen." textWrap="true"></Label>
    </GridLayout>
</GridLayout>

ts

public vibrator = new Vibrate();
    public testi = true;

    constructor(private page: Page) {
        // Use the component constructor to inject providers.
    }

    ngOnInit(): void {
        this.page.actionBarHidden = true;
        this.page.addCss(".page-content { background: #000000");
    }

    vibrate(){
        this.vibrator.vibrate(2000);
    }

    test(){
        this.testi = !this.testi;
    }

这似乎很简单，但是没有用。有什么我想念的吗？

Answer 1

您需要在点击时将变量设置为true / false

写入您的HTML文件

<button (click)="test()">Click</button>
<span *ngIf="testi">NG IF</span>

写入您的TS文件首先声明睾丸为

testi = false

test(){
   testi = true;
}

使用* ng如果您可以在元素为true或不为空时显示该元素，如果元素为false或为空，则它将不会在浏览器中显示

希望这可以解决您的问题，谢谢

Answer 2

NativeScript Button使用tap而不是click。因此，在您的代码中test()永远不会被调用。

<button (tap)="test()" text="testbutton"></button>

请参阅getting started guide，并通过可用的UI组件来了解核心差异。

我如何通过* ngIf显示

2 个答案: