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的thes范围内的常见问题解答。我将把它留给您作为练习来找到解决方案。（提示：您可以基于faq.showDetail使用三元操作）

有什么方法可以固定手风琴的角度吗？

1 个答案: