Question

在listview项目中，我有一个标签。当点击标签时，它必须展开文字。例如：默认情况下，它只会显示一行标签文字。当我点击该标签文字时，它必须展开10行标签（这意味着标签内容描述有10行）。

发生了什么：

当点击第一个listview项标签时，它正在使用textWrap将标签完美地扩展到10行。但它也会自动扩展第四个列表项标签。

我需要什么：

单击第一个listview项标签时，它应该只展开第一个listview项textWrap。不是第四个列表项标签文本。

下面我发布了相关代码：

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>

Answer 1

如果你只想切换tapped item的textWrap值，你可以做一些非常简单的事情：

ts档案：

class TeamRecruitmentForm(forms.ModelForm):
    game = Games.objects.all()
    recruitment = GamesChoiceField(widget=forms.CheckboxSelectMultiple, queryset=game, required=False)  

    class Meta:
        model = Relation
        fields = ('recruitment', )

html文件，用以下内容替换行：

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

您可以看到我将<Label [textWrap]="false" [id]="'label' + i" [text]="item.data" (tap)="toggle($event)"></Label> ID更改为动态值，以便您可以稍后根据需要选择其中的每一个。这不是使这项工作成功的原因，但它比为每个人提供相同的内容要清晰得多。

这里的工作示例：https://github.com/mickaeleuranie/nativescript-stackoverflow-46910984

Answer 2

我不是nativeScript＆＃39; expert＆＃39;，所以我将尝试仅解释原理。保留所单击标签的属性/字段。对于开始/默认值，给它-1。每次单击标签时，将属性值设置为标签的索引值（代码中为i）。如果标签具有该属性值，则根据条件显示/隐藏/展开标签的行。希望它足够清楚。

selected = -1;

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

列表视图项目单击一个标签，仅在选定的列表项目

2 个答案: