Событие OnBlur без мигания ngModel и текстового поля

Приложение Nativescript: я создаю динамические текстовые поля.

1) Проблема. Когда я нажимаю на динамически генерируемое текстовое поле, клавиатура отображается на миллисекунды и исчезает. Когда я нажимаю очень быстро несколько раз, клавиатура остается.

2) Как сделать событие onChange/onBlur для динамически сгенерированного TextField? Например, когда я обновляю текстовое поле, мне нужно вызвать метод.

Вот текущий список: (размытие) Не работает: <StackLayout col="1" row="0"> <ListView [items]="categoryService.attributes | async"> <template let-item="item" let-i="index"> <GridLayout rows="50 100"> <Label [text]="item.name"></Label> <TextField #input *ngIf="item.type=='text'" row="1" hint="Enter Value here" [text]="item.name" (blur)="categoryService.onAttributeChange(item, item.type, null, input.value)"></ TextField> <Switch #switch *ngIf="item.type=='checkbox'" row="1" checked="false" (checkedChange)="categoryService.onAttributeChange(item, item.type, null, switch.checked)"></Switch> <DropDown #aa *ngIf="item.type=='select'" row="1" [items]="categoryService.showAttributeValues(item.value)" [selectedIndex]="selectedIndex" (selectedIndexChange)="categoryService.onAttributeChange(item, item.type, aa.selectedIndex)"></DropDown> </GridLayout> </template> </ListView> </StackLayout>

Спасибо!


nativescript angular2-nativescript
person IvRRimUm    schedule 19.09.2016    source источник
comment
Привет, IvRRimUm, Проблема с отображением клавиатуры для TextField в ListView уже исправлена ​​и будет доступна в NS 2.4 - проблема github.com/NativeScript/NativeScript/issues/2942   -  person Nikolay Tsonev    schedule 03.11.2016

Ответы (1)


arrow_upward
0
arrow_downward

Что касается вашего второго вопроса, вы можете использовать метод textChange и вернуть $event в качестве аргумента, это поможет вам получить текст для каждого TextField в отдельности. Вы можете просмотреть пример кода ниже. Что касается проблемы с отображением клавиатуры, это может быть связано с событием listview itemTap. Однако эта проблема была воспроизведена только на Android и все еще ищет возможное решение.

app.component.html

<StackLayout>
    <ListView [items]="myItems" (itemTap)="onItemTap($event)">
        <template let-item="item" let-i="index" let-odd="odd" let-even="even">
            <StackLayout [class.odd]="odd" [class.even]="even">
                <Label [text]='"index: " + i'></Label>
                <Label [text]='"[" + item.id +"] " + item.name'></Label>
                <TextField (tap)="onTap($event)" hint="Enter text" text="" (textChange)="ontextChange($event)"></TextField>

            </StackLayout>
        </template>
    </ListView>
</StackLayout>

app.component.ts

import {Component, Input, ChangeDetectionStrategy} from '@angular/core';
import {TextField} from "ui/text-field";
import app = require("application");

class DataItem {
    constructor(public id: number, public name: string) { }
}

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
   public myItems: Array<DataItem>;
    private counter: number;
    public status =true;

    constructor() {
        this.myItems = [];
        this.counter = 0;
        for (var i = 0; i < 50; i++) {
            this.myItems.push(new DataItem(i, "data item " + i));
            this.counter = i;
        }
    }

    public onItemTap(args) {
        console.log("------------------------ ItemTapped: " + args.index);
    }

    public ontextChange(args){
        console.log("text "+args.object.text);
    }
}

надеюсь, это поможет

person Nikolay Tsonev    schedule 20.09.2016