我試圖創建一個手風琴，你可以點擊每個手風琴，但我也希望有另一個按鈕，點擊后可以展開或折疊所有手風琴。
所以現在我有這個.ts組件：
import { Component, OnInit } from '@angular/core'/span>;
@Component（{
selector: 'app-faq',
templateUrl: './faq.component.html',
styleUrls: ['./faq.component.scss'] 。
})
export class FaqComponent 實作 OnInit {
accordion1: boolean;
accordion2: 布林值。
accordion3: 布林值。
accordionAll: 布林值。
constructor（） { }
ngOnInit（） {
}
現在，每個手風琴只是一些CSS，然后我可以用以下方式激活每個手風琴：
<div class="accordion-header"（點擊）="accordion1 = ! accordion1" [ngClass]="accordion1 ? 'is-active' : ''">Accordion 1< /div>
然后我可以給它一些造型，并且用那個特定的accordion1狀態激活一些手風琴內容。
對于擴展/折疊，我目前有這樣的東西：
<div *ngIf="!accordionAll" (click)="accordion1 = true; accordion2 = true; accordion3 = true; accordionAll = true" /span>> < /div>
< div *ngIf="accordionAll"（click）="accordion1 = false。accordion2 = false; accordion3 = false; accordionAll = false"></div>
現在，在某種意義上這是可行的。但是如果我突然有20個不同的手風琴，這將是可怕的。此外，我不喜歡我需要有兩個 div，因為某種影片（例如一個圖示）在這種方式下效果并不理想。
因此，我的問題是：我如何以 "正確 "的方式來做這件事，使它不會被許多手風琴搞得一團糟，并且我可以真正地只用一個按鈕來完成展開/折疊？
uj5u.com熱心網友回復：
因為你已經跟蹤了accordionAll的狀態，所以你不需要向方法傳遞一個布林值。
< div (click)="toggleAll()"/span>>。 </div> toggleAll()。void {
this.accordionAll = !this.accordionAll.
this.accordion1 = this.accordionAll;
this.accordion2 = this.accordionAll。
this.accordion3 = this.accordionAll.
}uj5u.com熱心網友回復：
我認為像這樣的東西會起作用。
import { Component, OnInit } from '@angular/core'/span>;
@Component（{
selector: 'app-faq',
templateUrl: './faq.component.html',
styleUrls: ['./faq.component.scss'] 。
})
export class FaqComponent 實作 OnInit {
accordion1: boolean;
accordion2: 布林值。
accordion3: 布林值。
accordionAll: 布林值。
constructor（） { }
ngOnInit（） {
}
toogleAll（） {
this.accordion1 = this.accordionAll;
this.accordion2 = this.accordionAll。
this.accordion3 = this.accordionAll。
this.accordionAll = !this.accordionAll;
}
<div *ngIf="! accordionAll" (click)="toogleAll()"></div>/span>
< div *ngIf="accordionAll"（click）="toogleAll（）"> </div>>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/307501.html
標籤：