使用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

我终于能够弄清楚了，但是我从本地论坛的@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>

这是我的屏幕：