Typescript NativeScript-使用另一个UI元素打开NativeScript下拉小部件

我对Nativescript真的很陌生，所以请原谅我的noob问题。 我想让我的下拉列表有更多的网络浏览器的感觉，所以我用的是 使用网格布局。并设计了它

图片：

XML:

到目前为止，我的代码隐藏查找文件（.ts）：

。。。
从“../../viewmodels/register/register view model”导入{RegisterViewModel}；
导出函数pageLoaded（参数：EventData）{
让page=args.object；
page.bindingContext=新的RegisterViewModel；
}

我想要

GridLayout

上的

openDropDown

函数打开下拉窗口小部件。 也就是说，整个

GridLayout

区域应该能够打开下拉菜单，包括字体图标。 我真的非常感谢您对代码的任何帮助来完成这一点。

---

或者更优雅的解决方案

nativescript下拉列表插件附带了打开下拉列表的方法，可在自述文件中找到：

因此，您需要的是在方法

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

public openDropDown（args:EventData）{
console.log（'I was tapped'）；//这很有效
让page=args.object；
let dropdown=page.getViewById（'yourDropDid'）；
dropdown.open（）；
}

nativescript下拉插件附带了打开下拉列表的方法，可在自述文件中找到：

因此，您需要的是在方法

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

public openDropDown（args:EventData）{
console.log（'I was tapped'）；//这很有效
让page=args.object；
let dropdown=page.getViewById（'yourDropDid'）；
dropdown.open（）；
}

要让它工作，我必须使用以下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>

---

为了让它工作，我必须使用以下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>

---

令人惊叹的。非常感谢Brad，这很有效。我编辑您的答案只是为了显示我使用的确切代码。不要认为在这种情况下，

args.object

将是

页面

，而是

GridLayout

，您仍然可以从中调用

getViewById（）

，但类型不正确。很高兴它奏效了：）就像我说的，我是新来的。：）请继续用更正确的版本编辑代码，以供将来参考。太棒了。非常感谢Brad，这很有效。我编辑您的答案只是为了显示我使用的确切代码。不要认为在这种情况下，

args.object

将是

页面

，而是

GridLayout

，您仍然可以从中调用

getViewById（）

，但类型不正确。很高兴它奏效了：）就像我说的，我是新来的。：）请继续使用更正确的版本编辑代码，以供将来参考。

<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>

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

private page: Page