И вот мой экран:
аюсь создать тип экрана с часто задаваемыми вопросами в своем приложении, однако не могу найти способ показать вопросы и свернуть ответы, когда кто-то нажимает на элемент. Я уже пытался использовать RadDataForm Groups и смог выполнить свертывание, но я не смог изменить размер экрана и элементов, поэтому сейчас пытаюсь использовать 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")
]);
}
}
Мой экран:
