如何在 angular 中折叠和展开？

Question

我正在尝试折叠和扩展。 因此，当用户单击“部分标题”时，它会折叠相应的信息。

@Component({
selector: 'knowledge-base',
  template: `
    <div *ngFor="let section of questions">
      <h2>{{section.sectionTitle}}</h2>
      <div class="submenu">
       <div *ngFor="let q of section.questions">
        <div class="questions"> <span class="question">Q.</span> {{q.question}}<br/></div>
        <div class="answers"> <span class="answer">A.</span> {{q.answer}}<br/></div>
       <div *ngIf="q.issues?.length">
         <span>Issues:</span>
         <div class="issues" *ngFor="let issue of q.issues">{{issue}}<br/></div>
      </div>
    </div>
  </div>
  <hr>
</div>
`,
styles: [`
h2 {
  margin-left: 15px;
  margin-bottom: 20px;
  margin-top: 25px;
}

hr {
  width: 90%;
  margin: 0px auto;
}

.submenu {
  margin-left: 15px;
}

.questions {
  font-weight: bold;
  margin-left: 15px;
}

.answers {
  font-weight: italic;
  font-style: italic;
  margin-top: 15px;
  margin-left: 15px; margin-bottom: 20px;
}

.issues {
  float: left;
  color: red;
  width: 100%;
   margin-top: 15px;
   margin-bottom: 15px;
  }

.question {
  font-weight: bold;
}

.answer{
  font-weight: bold;
}

` ],

})
export class KnowledgeBaseComponent {
questions = knowledgeData()

}

这是我要折叠和展开的数据。 我尝试在 css 的部分标题周围使用 div，但似乎不起作用

export const knowledgeData = (): KnowledgeDataModel[] =>  [
{
sectionTitle:'Mission and Vision Statements',
questions: [
     {
    question: 'What is our short term mission and our long term vision',
    answer: `With the current advancement in the medical field, it means that we can live longer than 
    ever before, however, it comes with its issues.`,
    issues: [],
      },
    ],
  },
 {
sectionTitle:'Account Management',
questions: [
  {
    question: 'What are accounts and how do I make one?',
    answer: 'Accounts group together users, there are provider accounts for agents and consumer 
    accounts for users',
    issues: [
      'currently unable to rename an account',
      'currently unable to delete an account once users have been added',
    ],
  }
]

我想在用户单击“部分标题”时展开并在他们单击“部分标题”时折叠？

谢谢

Answer 1

将点击处理程序添加到

<h2>{{section.sectionTitle}}</h2>

喜欢，

<h2  (click)="toggleContent(section)">{{section.sectionTitle}}</h2>

并且在

    function toggleContent(section) {
// Here you can do more clear code
     section.toggeled = !section.toggeled;
    }

对于上述解决方案，您必须为“问题”数据中的每条记录维护切换键。