[ANGULAR] Nativescript로 접을 수있는 목록 만들기

Nativescript로 접을 수있는 목록 만들기

해결법

1. ---

   1.나는 그것을 마침내 알아낼 수 있었지만, Nativescript 포럼의 @ Manojdcoder의 코드에서 도움을 받았습니다. ListView 및 Observable 배열을 사용했습니다. 이것은 내 솔루션입니다.

   나는 그것을 마침내 알아낼 수 있었지만, 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>
   

   내 화면이 있습니다.

from https://stackoverflow.com/questions/49370335/creating-a-collapsible-list-with-nativescript by cc-by-sa and MIT license