Question

当我单击其中任何一个时，全部打开。我只希望打开我点击的内容。

  <div [ngClass]="showDetails?'open-faq-link':''" *ngFor="let faq of questionAnswerDetail"
       style="background: #f6f6f6 !important;">
    <div class="faq-title clearfix" (click)="showDetails = ! showDetails">
      <h3>
            <span class="faq-question">{{faq.Question}}
            </span> <span class="faq-arrow"><i [ngClass]="!showDetails?'fa fa-angle-right':'fa fa-angle-down'"
                                         aria-hidden="true"></i></span>
      </h3>
    </div>
    <div class="faq-details" *ngIf="showDetails">
      <p [innerHTML]="trustAsHtml(faq.Answer)"></p>

    </div>
  </div>

Answer 1

添加一个布尔值，例如showDetails，移至questionAnswerDetail的每个项目以控制其可见性。类似于以下示例。

在您的 component.ts 中：

questionAnswerDetail = [
  {
    showDetails: false,
    question: 'Question 1',
    answer: 'Answer 2'
  },
  {
    showDetails: false,
    question: 'Question 1',
    answer: 'Answer 2'
  }
];

在您的 component.html 中：

<ng-container *ngFor="let faq of questionAnswerDetail">
  <button (click)="faq.showDetails = !faq.showDetails">{{faq.question}}</button>
  <ng-container *ngIf="faq.showDetails">
    <p>{{faq.answer}}</p>
  </ng-container>
</ng-container>

应该以角度7一次打开一个手风琴

1 个答案: