NativeScript - Открыть виджет NativeScript DropDown с другим элементом пользовательского интерфейса.

Я действительно новичок в Nativescript, так что извините за вопрос noob. Я хотел, чтобы в раскрывающемся меню я чувствовал себя более веб-браузером, поэтому я использовал виджет DropSown Петерстаева NativeScript вместе с GridLayout. И разработал это.

Образ:

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>

мой файл view-model:

...
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;
}

Я хочу openDropDown функция на GridLayout открыть выпадающий виджет. То есть весь GridLayout область должна иметь возможность открывать выпадающее меню, в том числе значок шрифта. Я очень признателен за любую помощь с кодом для достижения этой цели. Или более элегантное решение.

Источник

2 ответа

Решение

Плагин nativescript-раскрывающегося списка поставляется с методом открытия раскрывающегося списка, который можно найти здесь в README: https://github.com/PeterStaev/NativeScript-Drop-Down

Так что вам нужно, чтобы получить ссылку на раскрывающийся список в вашем методе openDropDown, Я бы назначил идентификатор для раскрывающегося компонента пользовательского интерфейса, получил бы раскрывающийся список в методе и затем вызвал бы .open(); Это откроет раскрывающийся список.

Для примера ниже, чтобы работать, я предполагаю, что у вас есть экземпляр 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();
}
Источник

Чтобы заставить это работать, я должен был использовать следующий 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
Источник
Другие вопросы по тегам