Persiste mois sélectionné dans tous les angles de div de bascule à bascule 4

Question

J'affiche des données sous l'option bascule dans laquelle je garde la carte cliquée. Mais si je clique sur un autre mois, tous les autres en-têtes grisés ont les valeurs précédemment sélectionnées.

Je trouve un moyen de conserver la valeur sous Selected month pour qu'elle soit réellement sélectionnée. Par exemple:: Pour la première fois j'ai sélectionné la valeur sous la carte 2017 en tant que Apr 1, la div de bascule déroulante affiche Selected month :Apr.

Maintenant, accédez à la carte 2018 et cliquez sur Oct 18 la valeur dans les deux bas de chute ouvert se révèle être Selected month: Oct qui change le mois précédemment sélectionné comme well.Is il possible de persister/afficher le mois sélectionné précédemment.

lien Plunker (pls sortie de prévisualisation en mode fenêtré): Link

Answer 1

Plutôt que this.selectedMonth seule variable, utilisez yearData.selectedMonth avec chaque donnée de l'année.

updated plunkr

HTML {{ensemble avec yearData.selected}}

<div class="container"> 
    <div *ngIf="isActive[i1]"> 
     <div class="grey-header"> 
      Selected month:{{yearData.selected}} 
     </div> 
    </div> 
</div> 

JS change

Ajouter selected clé dans votre osData.

maintenant sur chaque clic de ligne, définissez this.osData[i].selected = month;

this.osData= [{"cardData":[{"view":"Jan","count":1},{"view":"Apr","count":1},{"view":"Jun","count":1}],"selected:": "", "year":2017,"month":"June","family":"AND"},{"cardData":[{"view":"Jan","count":25},{"view":"Oct","count":18},{"view":"Nov","count":14},{"view":"Dec","count":18}],"selected:": "","year":2018,"month":"June","family":"NOU"},{"cardData":[{"view":"Jan","count":21},{"view":"Feb","count":11},{"view":"Mar","count":22},{"view":"Apr","count":18},{"view":"Nov","count":11},{"view":"Dec","count":16}],"selected:": "","year":2019,"month":"June","family":"HNY"},{"cardData":[{"view":"Jan","count":10},{"view":"Jun","count":9},{"view":"Nov","count":5},{"view":"Dec","count":8}],"selected:": "","year":2020,"month":"June","family":"GIN"}] 
    this.setClickedMonth = function (index, i,month) { 
      this.selectedMonthIndex = index; 
      this.osData[i].selected = month; 
      this.selectedMonth=month; 
      if (this.isActive[i] === false) { 
       this.isActive[i] = !this.isActive[i]; 
       this.selectedMonthIndex = ''; 
      } else { 
       this.isActive[i] = !this.isActive[i]; 
      } 
     } 

    }