有沒有辦法把我的手風琴固定成角度？

Question

我是 angular 的新手，我試圖制作一個手風琴組件，但它沒有像我想要的那樣工作，這是我的 html 代碼。

 <div class="faq-item-container">
      <h1 class="mt-1 mb-5"><strong>Frequently Aksed Questions</strong></h1>
    <div class="row" (click)="toggleDetail(); toggleIcon();" *ngFor= "let faq of faqs">
      <div class="col my-2">
        <h3> {{faq.title}} <a><fa-icon [icon]="faChevronDown" class="float-right"></fa-icon></a></h3>
      </div>
      <div class="col-12" *ngIf="showDetail">
        <div class="faq-detail-container mt-1">
          <div class="col-12">
            <p><small>
              {{faq.content}}
            </small></p>
        </div>
      </div>
    </div>
  </div>
</div>

這是 ts 代碼

import { Component, OnInit } from '@angular/core';
import {faChevronUp, faChevronDown, IconDefinition, faSquare} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-jobs-faq',
  templateUrl: './jobs-faq.component.html',
  styleUrls: ['./jobs-faq.component.scss']
})
export class JobsFaqComponent implements OnInit {
  faChevronUp: IconDefinition = faChevronUp;
  faChevronDown: IconDefinition = faChevronDown;


  showDetail: boolean;
  faqs = [
    {
      id: 1,
      title: 'faq1',
      content: 'content1'
    },
    {
      id: 2,
      title: 'faq2',
      content: 'content2'
    },
    {
      id: 3,
      title: 'faq3',
      content: 'content3'
    }
  ];


  constructor() {
    this.showDetail = false;
   }


  toggleDetail(): void {
    this.showDetail = !this.showDetail;
  }
  toggleIcon() {
    if (this.faChevronDown === faChevronDown) {
        this.faChevronDown = faChevronUp;
    } else {
        this.faChevronDown = faChevronDown;
    }
}

  ngOnInit() {
  }

}

問題是當我點擊 faq1 時，其他人也崩潰了，是的，我知道這是因為我調用了相同的函數，這就是我想問的，如何單獨調用該函數以使這個手風琴像它應該的那樣工作? 謝謝。

Answer 1

這取決於您是否想在單擊一個部分時關閉所有其他部分，但解決方案可能看起來像這樣：

<div class="faq-item-container">
      <h1 class="mt-1 mb-5"><strong>Frequently Aksed Questions</strong></h1>
    <div class="row" (click)="toggleDetail(faq.id); toggleIcon();" *ngFor= "let faq of faqs">
      <div class="col my-2">
        <h3> {{faq.title}} <a><fa-icon [icon]="faChevronDown" class="float-right"></fa-icon></a></h3>
      </div>
      <div class="col-12" *ngIf="faq.showDetail">
        <div class="faq-detail-container mt-1">
          <div class="col-12">
            <p><small>
              {{faq.content}}
            </small></p>
        </div>
      </div>
    </div>
  </div>
</div>

import { Component, OnInit } from '@angular/core';
import {faChevronUp, faChevronDown, IconDefinition, faSquare} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-jobs-faq',
  templateUrl: './jobs-faq.component.html',
  styleUrls: ['./jobs-faq.component.scss']
})
export class JobsFaqComponent implements OnInit {
  faChevronUp: IconDefinition = faChevronUp;
  faChevronDown: IconDefinition = faChevronDown;

  faqs = [
    {
      id: 1,
      title: 'faq1',
      content: 'content1',
      showDetail: false
    },
    {
      id: 2,
      title: 'faq2',
      content: 'content2',
      showDetail: false
    },
    {
      id: 3,
      title: 'faq3',
      content: 'content3',
      showDetail: false
    }
  ];

  toggleDetail(faqId: number): void {
    this.faqs = this.faqs.map(faq => {
        faq.showDetail = (faq.id == faqId) ? !faq.showDetail : false;
        return faq;
    });
  }

  toggleIcon() {
    if (this.faChevronDown === faChevronDown) {
        this.faChevronDown = faChevronUp;
    } else {
        this.faChevronDown = faChevronDown;
    }
  }

  ngOnInit() {
  }

}

請注意，您的 [icon]="faChevronDown" 應該基於您的 *ngFor 范圍內的常見問題解答。 我會把它留給你作為練習來找到解決方案。 （提示：你可以使用基於 faq.showDetail 的三元運算）