Question

我正在构建一个可以点击打开的Angular手风琴组件（总共有3个手风琴，时间只有一个“选定”的手风琴开场）。我希望能够在第二次点击时关闭当前打开的手风琴。现在我只能打开一次。

手风琴group.component.ts

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

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

  items = ['accordion1', 'accordion2', 'accordion3']
  selectedIndex;

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

}

手风琴group.component.html

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

accordion.component.html

<div
class="accordion"
[ngClass]="currentClass">
</div>

accordion.component.ts

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

@Component({
  selector: "app-accordion",
  templateUrl: "./accordion.component.html",
  styleUrls: ["./accordion.component.css"]
})
export class AccordionComponent implements OnChanges {
  @Input() item;
  @Input() selectedIndex;
  @Input() index;
  currentClass;
  isOpen = false;

  ngOnChanges(){
    this.handleExpansion()
  }

  handleExpansion() {
    this.isOpen = true;
    if (this.isOpen && this.selectedIndex === this.index) this.currentClass = "expand";
    else this.currentClass = "collapse"
  }

}

Answer 1

我想从文档中指出的一件事是

Angular calls its ngOnChanges() method whenever it detects changes to input 
properties of the component (or directive).

所以现在当你第二次点击同一个手风琴组件时，它的输入属性根本没有改变。因此您还需要在点击时添加handleExpansion。

我也更新了handleExpansion逻辑

  handleExpansion() {
  // check if the component is selected or not
  if (this.selectedIndex === this.index) {
  // check if the component was open or not after seletion
  // if it was open collapse it and return
   if (this.isOpen) {
     this.currentClass = "collapse";
     this.isOpen = false;
     return
   }
  // if the component is selected for first time expand it
   this.currentClass = "expand";
   this.isOpen = true;
  }
  else {
  // if the component is not selected collapase it and 
   this.currentClass = "collapse";
  // close it in case if it was open earlier
   this.isOpen = false;
  }
 }

这是一个有效的example

Answer 2

您可以使用模型语句，只需将您的手风琴数组更改为对象：

getDataForBarChart = (idx) => {
if (this.props.type === "cells" || this.props.type === "genes") {
  let chartData = this.state.clusterData[idx];
  let geneNames = geneNameArr[this.state.geneNameArrIdx]["genes"].split(",");
  if (this.props.type === "genes") {
    geneNames = this.state.allAddedGenes;
  }
  if (chartData) {
    let presentGenes = chartData.map((geneArr) => {
      return geneArr[0];
    });
    geneNames.map((geneName, idx) => {
      if (presentGenes.indexOf(geneName) === -1) {
        this.addZeroGene(chartData, geneName);
      }
    });
    chartData.sort(this.sortFunc);
    return chartData;
  } else if (chartData == null) {
    chartData = [];
    geneNames.map((geneName, idx) => {
      this.addZeroGene(chartData, geneName);
    });
    return chartData;
  } else {
    return chartData;
  }
}
}

然后我们就像这样：

interface Accordion {
    id: number,
    index: number,
    show: boolean
}

然后更改属性let accordions: Accordion[] = []; accordions.push({'id': 1, 'index': 0, 'show': false}); accordions.push({'id': 2, 'index': 1, 'show': false}); accordions.push({'id': 3, 'index': 2, 'show': false});以显示/隐藏点击的手风琴。

将选定的手风琴与show视为真，并将其设为show：

false

第二次单击Angular

2 个答案: