NativeScript Angular中点击Label切换对应图标实现手风琴效果问题

1. 修正并修改模板代码 #

你现有模板存在一个布局问题：columns="*, *" 仅定义了2列（列索引为0、1），但你给图标设置了col="2"属于越界，会导致布局错位，修正后加入动态逻辑即可实现需求：

<GridLayout columns="*, auto">
  <!-- 问题点击区域 -->
  <Label 
    text="Question" 
    textWrap="true" 
    (tap)="onTap(0)" 
    class="h2 que" 
    col="0"
  ></Label>
  <!-- 动态切换图标：未展开显示向下箭头，展开后显示你需要的向上箭头 -->
  <Label 
    class="fas h1 icon" 
    [text]="isToggled[0] ? '&#xf108;' : '&#xf107;'" 
    col="1"
  ></Label>
  <!-- 手风琴答案区域，展开时显示 -->
  <StackLayout col="0" colSpan="2" *ngIf="isToggled[0]">
    <Label text="这里是对应问题的答案内容" textWrap="true" class="answer"></Label>
  </StackLayout>
</GridLayout>

如果是多个FAQ项，推荐用*ngFor遍历渲染，避免重复编写代码：

<StackLayout>
  <GridLayout 
    *ngFor="let item of faqList; let i = index"
    columns="*, auto"
    class="faq-item"
  >
    <Label 
      [text]="item.question" 
      textWrap="true" 
      (tap)="onTap(i)" 
      class="h2 que" 
      col="0"
    ></Label>
    <Label 
      class="fas h1 icon" 
      [text]="isToggled[i] ? '&#xf108;' : '&#xf107;'" 
      col="1"
    ></Label>
    <StackLayout col="0" colSpan="2" *ngIf="isToggled[i]">
      <Label [text]="item.answer" textWrap="true" class="answer"></Label>
    </StackLayout>
  </GridLayout>
</StackLayout>

2. 补充TS逻辑（多FAQ场景需要添加数据数组） #

import { Component, OnInit } from '@angular/core';
import { RadSideDrawer } from 'nativescript-ui-sidedrawer'
import { Application } from '@nativescript/core'

interface FaqItem {
  question: string;
  answer: string;
}

@Component({
    selector: 'faqs',
    templateUrl: './faqs.component.html',
    styleUrls: ['./faqs.component.css']
})

export class FaqsComponent implements OnInit {
    isToggled = [false, false, false, false]
    // 多FAQ数据列表，单条FAQ场景可删除该数组
    faqList: FaqItem[] = [
      {question: '问题1', answer: '答案1'},
      {question: '问题2', answer: '答案2'},
      {question: '问题3', answer: '答案3'},
      {question: '问题4', answer: '答案4'},
    ]
    constructor() { }

    ngOnInit() { }

    onDrawerButtonTap(): void {
        const sideDrawer = <RadSideDrawer>Application.getRootView()
        sideDrawer.showDrawer()
    }

    onTap(index: number) {
        this.isToggled.fill(false, 0)
        this.isToggled[index] = !this.isToggled[index]
    }
}

逻辑说明 #

• 通过Angular属性绑定[text]，根据isToggled对应下标的布尔值动态切换箭头图标
• 通过*ngIf指令控制答案区域的显隐，实现手风琴折叠展开效果
• 你现有的onTap逻辑已经满足手风琴一次仅展开一项的需求，点击已展开的当前项会收起，点击其他项会关闭当前展开项、打开新选中的项

内容的提问来源于stack exchange，提问作者pat