2017-10-24 5 views
1

リストビューアイテムにはラベルがあります。ラベルをクリックすると、テキストが展開されます。 例:デフォルトでは、ラベルテキストは1行だけ表示されます。ラベルテキストをクリックすると、10行のラベルが展開されます(ラベル内容の記述には10行あります)。何が起こっているリストビューアイテム選択したリストアイテムのみにテキストラップを表示するラベルをクリックします

それは完全にtextWrapを使用して10行にラベルを拡大して、最初のリストビュー項目のラベルをクリックしてください。しかし、自動的に4番目のリスト項目ラベルも拡張しています。私は必要なもの

最初のリストビュー項目のラベルをクリックすると、それだけで最初のListView項目textWrapを展開する必要があります。 4番目のリスト項目ラベルのテキストではありません。

TSファイル:

onClickList(args: EventData, index: number): void { 

    let labelArg = <Label>args.object; 

    var listview: ListView = <ListView>this.page.getViewById("listviewId"); 

    listview.refresh(); 

    labelArg.textWrap = true; 

    listview.refresh(); 

} 

htmlファイル:私は、関連するコードを掲載している下

<ListView id="listviewId" [items]="_myFeedsList" class="list-group"> 
    <ng-template let-item="item" let-i="index"> 
    <StackLayout id="stackId"> 
     ....... ....... 
     <Label textWrap="false" id="labelID" [text]="item.data" (tap)="onClickList($event, i)"></Label> 

    </StackLayout </ng-template> 
</ListView> 

答えて

0

私はnativeScript '専門家' ではないです、私プリンシペだけを説明しようとします。クリックしたラベルのプロパティ/フィールドを保持します。開始/デフォルト値は-1を与えます。ラベルをクリックするたびに、プロパティ値をラベルのインデックス値(コードのi)に設定します。ラベルにそのプロパティ値がある場合は、条件に基づいてラベルの行を表示/非表示/展開します。十分にはっきりしていることを望みます。

selected = -1; 

<Label textWrap="false" id="labelID" [text]="item.data" (tap)="selected = i; onClickList($event, i)"></Label> 
+0

はtapまたはitemTapですか? – Eliseo

2

あなたがちょうどタップアイテムのtextWrap値を切り替えたい場合は非常にシンプルな何かを行うことができます:

TSファイル:

toggle(event) { 
    if (event.object.textWrap) { 
     event.object.textWrap = false; 
    } else { 
     event.object.textWrap = true; 
    } 
} 

htmlファイル、次の行を置き換えます。

<Label [textWrap]="false" [id]="'label' + i" [text]="item.data" (tap)="toggle($event)"></Label> 

LabelのIDを動的な値に変更したので、後でそれぞれを選択することができます。それはこの作業を行うものではありませんが、すべての人に同じIDを与えるよりもはるかにクリーンです。

実例はこちらhttps://github.com/mickaeleuranie/nativescript-stackoverflow-46910984

+0

thanks.this答えは私がexpected.But唯一の問題は、私は5番目のlistviewの項目のラベルをクリックすると、それはそのテキストを展開している見ている良いです。しかし、スクロールして再び戻ってくると、6番目のlistitemラベルが自動的に折り返し(拡大)、5番目は隠れてしまいます。 – Steve

関連する問題