使用 NativeScript 创建可折叠列表

Question

我正在尝试在我的应用中创建常见问题解答类型的屏幕，但是当有人点击该项目时，我找不到显示问题和折叠答案的方法。 我已经尝试使用 RadDataForm Groups 并且能够进行折叠，但我无法调整屏幕和元素的大小，所以现在正在尝试使用 Accordion。 我仍然无法崩溃甚至显示问题。我在这里看到有人说他们能够在没有 Accordion 的情况下使用折叠和可见属性使列表工作，但他们没有分享他们是如何做到的。 当我单击列表中的名称时，没有任何反应。我想为这个问题找到一个简单有效的解决方案。 我的代码：

    <Accordion [items]="myQuestions" itemTapped="tapped" headerTextBold="true" headerTextColor="white" headerColor="pink" headerTextColor="blue"
  allowMultiple="true">

  <ng-template accordionHeaderTemplate let-item="item" let-i="index">
      <GridLayout backgroundColor="blue" columns="auto,*">
          <Label [text]="item.question"></Label>
      </GridLayout>
  </ng-template>

  <ng-template accordionItemTemplate let-item="item" let-parent="parentIndex" let-even="even" let-child="childIndex">
      <StackLayout>
          <Label [text]="item.description"></Label>
      </StackLayout>
  </ng-template>

  <!-- IOS Only
  <ng-template accordionFooterTemplate let-item="item" let-i="index">
      <GridLayout backgroundColor="yellow" columns="auto,*">
          <Label [text]="hi"></Label>
          <Label col="1" text="-"></Label>
      </GridLayout>
  </ng-template> -->
</Accordion>

组件：

import { Component, OnInit, ViewChild} from "@angular/core";
import { Router } from "@angular/router";
import { Question } from "../../shared/question/question";
import { Observable } from "tns-core-modules/data/observable";
import { ObservableArray } from "tns-core-modules/data/observable-array";
// import { RadDataFormComponent } from "nativescript-ui-dataform/angular";

@Component({
  selector: "question",
  moduleId: module.id,
  templateUrl: "./question.html",
  styleUrls: ["./question-common.css", "./question.css"]
})
export class QuestionComponent extends Observable{ 
  public myQuestions: ObservableArray<any>;
  // @ViewChild('myRuntimeDataFormComp') myRuntimeDataFormComp: RadDataFormComponent;
  constructor(){
    super();
    this.myQuestions =new ObservableArray([
      new Question("Topic 1", "lorem ipsum lorem ipsum lorem ipsum"),
      new Question("Topic 2", "lorem ipsum lorem ipsum lorem ipsum"),
      new Question("Topic 3", "lorem ipsum lorem ipsum lorem ipsum"),
      new Question("Topic 4", "lorem ipsum lorem ipsum lorem ipsum"),
      new Question("Topic 5", "lorem ipsum lorem ipsum lorem ipsum"),
      new Question("Topic 6", "lorem ipsum lorem ipsum lorem ipsum")
      ]);   
  }

}

我的屏幕：

Answer 1

我终于弄明白了，但我得到了 nativescript 论坛中@manojdcoder 代码的帮助。 我使用了 ListView 和 Observable 数组。这是我的解决方案：

  import { Component, OnInit, ViewChild} from "@angular/core";
  import { Router } from "@angular/router";
  import { Question } from "../../shared/question/question";
  import { Observable } from "tns-core-modules/data/observable";
  import { ObservableArray } from "tns-core-modules/data/observable-array";
  import { RadListView, ListViewEventData } from "nativescript-ui-listview";
  // import { RadDataFormComponent } from "nativescript-ui-dataform/angular";

  import { isIOS, isAndroid } from "platform";
  import * as utils from "utils/utils";
  declare var UIView, NSMutableArray, NSIndexPath;


  @Component({
    selector: "question",
    moduleId: module.id,
    templateUrl: "./question.html",
    styleUrls: ["./question-common.css", "./question.css"]
  })
  export class QuestionComponent implements OnInit{ 
    public myQuestions: ObservableArray<any>;
    public isItemVisible: boolean;
    constructor(){
    }

    ngOnInit() {
      this.myQuestions =new ObservableArray([
        new Question("Topic 1", "lorem ipsum lorem ipsum lorem ipsum",false),
        new Question("Topic 2", "lorem ipsum lorem ipsum lorem ipsum",false),
        new Question("Topic 3", "lorem ipsum lorem ipsum lorem ipsum",false),
        new Question("Topic 4", "lorem ipsum lorem ipsum lorem ipsum",false),
        new Question("Topic 5", "lorem ipsum lorem ipsum lorem ipsum",false),
        new Question("Topic 6", "lorem ipsum lorem ipsum lorem ipsum",false)
        ]);  
    } 

    templateSelector(item: any, index: number, items: any): string {
      return item.expanded ? "expanded" : "default";
    }

    onItemTap(event: ListViewEventData) {
      const listView = event.object,
          rowIndex = event.index,
          dataItem = event.view.bindingContext;

      dataItem.expanded = !dataItem.expanded;
      if (isIOS) {
              var indexPaths = NSMutableArray.new();
              indexPaths.addObject(NSIndexPath.indexPathForRowInSection(rowIndex, event.groupIndex));
              listView.ios.reloadItemsAtIndexPaths(indexPaths);
      }
      if (isAndroid) {
          listView.androidListView.getAdapter().notifyItemChanged(rowIndex);
      }
    }

  }

这是使用 RadListView 的视图：

<RadListView [items]="myQuestions" [itemTemplateSelector]="templateSelector" class="list-group" (itemTap)="onItemTap($event)">
    <ng-template tkListItemTemplate let-item="item">
        <GridLayout rows="auto,auto" columns="6*,*" class="add-dropdown">
            <Label [text]="item.question" class="list-group-item" col="0"></Label>
            <Image src="res://arrow" col="1"></Image>
        </GridLayout>

    </ng-template>
    <ng-template tkTemplateKey="expanded" let-item="item">
        <GridLayout rows="auto,auto" columns="6*,*" class="list-group-item add-dropdown">
            <Label row="0" col="0" [text]="item.question" class="font-weight-bold"></Label>
            <Image row="0" col="1" src="res://arrow_horizontal"></Image>
            <Label row="1" col="0" [text]="item.description" class="show-answer"></Label>
        </GridLayout>

    </ng-template>
</RadListView>

这是我的屏幕：