Typescript 以编程方式添加或删除css类时，Nativescript UI不更新

在向页面上的元素添加或删除类时，我在更新UI时遇到问题。 我正在尝试替代nativescript dom插件，该插件目前不适用于ns6

主页

import { TOGGLECLASS, checkChildren } from "./common";

//hide / unhide extraneous fields
export function toggleHidden() {    
    checkChildren(TOGGLECLASS, page, "toHide", "hidden");
}

main-page.xml

<ActionItem id="settbtnfrm" tap="toggleHidden" icon="~/images/sett.png" visibility="visible"></ActionItem> <!-- Settings -->

<GridLayout columns="*, 100, auto, auto" rows="*" class="toHide hidden">
            <Label col="0" class="lbl lft" text="Jumbo Rate" textWrap="true" />
            <TextField col="1" hint="Jumbo" text="{{ rateJumbo }}" keyboardType="number" editable="true" />
            <Button col="2" text="-" objtoset="rateJumbo" class="btn btn-outline btn-rounded-sm mnb1" tap="reduceVal" changeVal="1" />
            <Button col="3" text="+" objtoset="rateJumbo" class="btn btn-outline btn-rounded-sm mnb2" tap="increaseVal" changeVal="1" />

        </GridLayout>

此代码删除或添加类。 我可以通过console.log（vii.cssClasses.has（clasName））检查它； 这会在控制台上返回正确的true false，但不会更新实际的UI。 css类为toHide的元素应该被隐藏和取消隐藏

要在main-page.xml中隐藏的示例元素

<ActionItem id="settbtnfrm" tap="toggleHidden" icon="~/images/sett.png" visibility="visible"></ActionItem> <!-- Settings -->

<GridLayout columns="*, 100, auto, auto" rows="*" class="toHide hidden">
            <Label col="0" class="lbl lft" text="Jumbo Rate" textWrap="true" />
            <TextField col="1" hint="Jumbo" text="{{ rateJumbo }}" keyboardType="number" editable="true" />
            <Button col="2" text="-" objtoset="rateJumbo" class="btn btn-outline btn-rounded-sm mnb1" tap="reduceVal" changeVal="1" />
            <Button col="3" text="+" objtoset="rateJumbo" class="btn btn-outline btn-rounded-sm mnb2" tap="increaseVal" changeVal="1" />

        </GridLayout>

请帮助我，我不太擅长NativeScript，但很喜欢这个框架

---

感谢

控制可见性的典型方法是将可见性属性与条件语句一起使用，然后设置关联的绑定变量，例如

在xml中：

<Label class="label" text="Label Text"  visibility="{{ showLabel ? 'visible' : 'collapsed' }}" />

如果你真的想控制这个类，那么你可以做一些事情，比如

<Label class="{{ showLabel ? 'labelShow' : 'labelHide' }}" text="Label Text"  />

---

这可能比您现在采用的方法要简单一些

您不应该使用

cssClasses

属性，最简单的方法是将所有类名以空格分隔传递给

className

属性

在内部，框架侦听

className

上的更改，对其进行解析并将其存储在

cssClasses

集合中，并触发UI更新

---

但如果您认为使用

className

很难，您更愿意使用

cssClasses

，那么您应该在视图实例上调用私有方法

。\u oncsstatechange（）

，以更新UI

谢谢你，大卫。这肯定是一种更简单的方法。