Angular @选择的输入（）在第一次单击时显示为false（角度）

我正在建立手风琴组件。我想要的行为是一次只打开一个手风琴，总共有三个。换句话说，当单击除当前打开的手风琴外的任何手风琴时，任何打开的手风琴都应折叠

现在，我可以打开/关闭这些手风琴，但我无法确定如何“选择”它们，以便在当前未选择折叠类的情况下应用折叠类。我的选择输入在第一次点击时是错误的，它在占卜中显示为其他

accordion-group.component.ts

import { AccordionComponent } from './../accordion/accordion.component';
import { Component, Input  } from '@angular/core';


@Component({
  selector: 'app-accordion-group',
  templateUrl: './accordion-group.component.html',
  styleUrls: ['./accordion-group.component.css']
})
export class AccordionGroupComponent {
  @Input() measures;
  selected

  select(i){
    this.selected = i;
  }
}

import { Component, Input } from "@angular/core";

@Component({
  selector: "app-accordion",
  templateUrl: "./accordion.component.html",
  styleUrls: ["./accordion.component.css"]
})
export class AccordionComponent {
  @Input() item;
  @Input() index;
  @Input() selected //this needs to receive true on selected component on click


  expand: string = "";
  isOpen = false;

  handleExpansion() {
    console.log(this.selected) //logs false on first click
    this.isOpen = !this.isOpen;

    this.isOpen ? (this.expand = "expand") : (this.expand = "collapse");
  }
}

accordion-group.component.html

<app-accordion
*ngFor="let item of items; let i = index"
[item]="item"
[selected]="i === selected"
(click)="select(i)">
</app-accordion>

<div
(click)="handleExpansion()"
class="accordion noHighlight {{expand}}">
</div>

accordion.component.html

<app-accordion
*ngFor="let item of items; let i = index"
[item]="item"
[selected]="i === selected"
(click)="select(i)">
</app-accordion>

<div
(click)="handleExpansion()"
class="accordion noHighlight {{expand}}">
</div>

---

如上所述，出现这种情况的原因是浏览器DOM事件冒泡。因此，AccordionComponent中的单击处理程序将在AccordionGroupComponent中的单击处理程序之前执行

有很多方法可以完成你想做的事情，所以我提出了一种方法

其要点是，小组确定哪种手风琴需要扩展（如果有的话）：

@Component({
    selector: 'app-accordion-group',
    template: `
        <app-accordion *ngFor="let accordion of accordions" [title]="accordion.title"
            [isExpanded]="accordion === expandedAccordion"
            (expandClick)="processExpandClick(accordion, $event)">
            <p>{{ accordion.description }}</p>
        </app-accordion>
    `
})
export class AccordionGroupComponent {
    @Input() accordions: Accordion[];

    expandedAccordion: Accordion = null;

    processExpandClick(accordion: Accordion, isExpanded: boolean) {
        this.expandedAccordion = isExpanded ? accordion : null;
    }
}

当发生展开/折叠事件时，手风琴会发出事件，允许组确定要展开/折叠的内容：

@Component({
    selector: "app-accordion",
    template: `
        <div class="accordion" [class.expanded]="isExpanded">
            <div (click)="handleClick()">
                <span *ngIf="!isExpanded">+</span>
                <span *ngIf="isExpanded">-</span>
                {{ title }}
            </div>
            <div class="accordion__content">
                <ng-content></ng-content>
            </div>
        </div>
    `,
    styles: [`
        .accordion__content {
            height: 0;
            overflow: hidden;
        }

        .expanded .accordion__content {
            height: auto;
        }
    `]
})
export class AccordionComponent {
    @Input() title;
    @Input() isExpanded = false;
    @Output() expandClick = new EventEmitter<boolean>();

    handleClick() {
        this.expandClick.emit(!this.isExpanded);
    }
}

---

由于事件冒泡，AccordionComponent中的click处理程序将在AccordionGroupComponent中的click处理程序之前执行。这是预期的行为。您是否考虑过侦听对所选属性的更改并删除AccordianComponent中的单击处理程序？我将如何执行此操作？是否将单击处理程序移动到Accordion组件？我将如何与每个手风琴兄弟沟通，如果当前未选中，它将关闭？感谢您提供一个示例，这有助于解决我的问题。您将如何仅在第一次单击时应用“折叠”类？我不明白您的问题。你能说得更具体些吗？当isExpanded为false时，我会应用一个“折叠”动画。因为加载时默认为false，所以动画会导致所有手风琴折叠，或者在首次加载页面时自动从打开变为关闭。Ok。是的，就像我说的，有很多方法可以解决这个问题。在我的例子中，假设最多有一个会被夸大。听起来你想要一个可以打开所有文件的箱子。在这种情况下，您可以保持所有手风琴的isExpanded状态，并将其默认为全部展开。下面是一个更新的Plunker，它展示了一种快速的方法：