html - 有什么办法可以把我的手风琴固定成角度?
问题描述
我是 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 时,其他人也崩溃了,是的,我知道这是因为我调用了相同的函数,这就是我想问的问题,如何分别调用该函数以使这个手风琴像它应该的那样工作? 谢谢。
解决方案
这取决于您是否要在单击某个部分时关闭所有其他部分,但解决方案可能看起来像这样:
<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 的三元运算)
推荐阅读
- sql-server - 批量插入与格式文件不匹配
- css - 更改 Google 可视化图表中特定标签的字体和粗细
- asp.net-core - 为什么在 Blazor 中缺少 HttpResponseMessage.IsSuccessStatusCode 属性?
- paypal - PayPal 订阅 API、智能支付按钮和自定义变量
- ruby-on-rails - 挂在 dokku 液滴中的 Rails 控制台
- python - 如何根据另一列的值对熊猫中的列进行重新排序
- rocket-chip - 在 VCS、Emulator Vsim 目录中运行“make”时出现错误“Makefrag-verilator:20: recipe for target”
- c - GPIO 输出状态如何在进程退出中存活下来?
- oracle-apex - 取消选中 oracle apex 中的复选框
- javascript - 在运行时创建表并将值传递到其单元格 - JavaScript