NativeScript

Question

我是 Nativescript 的新手，所以请原谅我的菜鸟问题。我想让我的下拉菜单有更多网络浏览器的感觉，所以我使用了 PeterStaev's NativeScript DropDown widget 与网格布局。并设计它的样式。

图片：

XML:

<GridLayout columns="*,auto" class="drop-down-menu" tap="{{ openDropDown }}">
   <dd:DropDown items="{{ items }}" selectedIndex="{{ selectedIndex }}" col="0" class="drop-down" />
   <Label text="&#xf078;" textWrap="false" col="1" class="font-awesome" />
</GridLayout>

到目前为止我的视图模型文件：

...
import { DropDown } from 'nativescript-drop-down';

export class RegisterViewModel extends Observable {
    ...
    public openDropDown() {
        console.log('I was tapped’); //this works
    }
}

到目前为止我的代码隐藏查找文件 (.ts)：

...
import { RegisterViewModel } from '../../viewmodels/register/register-view-model';

export function pageLoaded(args: EventData) {
    let page = <Page>args.object;
    page.bindingContext = new RegisterViewModel;
}

我想要 GridLayout 上的 openDropDown 函数打开下拉小部件。也就是说，整个 GridLayout 区域应该能够打开下拉菜单，包括字体图标。我真的很感激任何帮助代码来完成这个。或者更优雅的解决方案。

Answer 1

nativescript-drop-down 插件附带打开下拉菜单的方法，可在自述文件中找到：https://github.com/PeterStaev/NativeScript-Drop-Down#methods

所以您需要的是在您的方法 openDropDown 中获取对下拉列表的引用。我会为下拉 UI 组件分配一个 ID，在方法中获取下拉，然后调用 .open()；这将打开下拉菜单。

为了使下面的示例正常工作，我假设您将 Page 的实例设置为名为 page 的变量。还有其他获取组件的方法，但这行得通。

public openDropDown(args: EventData) {
    console.log('I was tapped’); //this works
    let page = <Page>args.object;
    let dropdown = <DropDown>page.getViewById('yourDropDid');
    dropdown.open();
}

Answer 2

为了让它工作，我必须使用以下 html

<GridLayout class="dd_container" columns="auto, *" (tap)="openDD($event)">
   <DropDown id="ddstates"
              [class]="cssClassState"
              [items]="ddstates"
              [(ngModel)]="selectedIndexState"
              [hint]="hintstate"
              (selectedIndexChanged)="onchange($event)"
              (opened)="onopen()"
              (closed)="onclose()"
              row="0"
              col="0">
    </DropDown>
</GridLayout>

我必须添加 id 属性而不仅仅是 #ddstates

openDD() 函数包含：

let dropdown = <DropDown>this.page.getViewById('ddstates');
dropdown.open();

页面值在构造函数中声明为

private page: Page

NativeScript - 使用另一个 UI 元素打开 NativeScript DropDown 小部件

NativeScript - Open NativeScript DropDown widget with Another UI Element

widget

listpicker

drop-down-menu

typescript