在所有下拉菜單中保留選定的月份切換div的角度4

Question

我在切換選項wherin下顯示數據我保持打開點擊卡。但如果我點擊其他月份，所有其他灰色標題都具有先前選擇的值。

我找到一種方法來將Selected month下的值保留爲實際選擇的方式。 例如：：我第一次選擇卡2017下的值爲Apr 1，下拉撥動div顯示爲Selected month :Apr。

現在導航到卡2018，並在打開的下拉菜單上都Oct 18點擊的價值原來是Selected month: Oct正在改變先前選擇每月well.Is有什麼辦法能堅持/顯示先前選定的一個月。

Plunker鏈路（PLS在窗口模式下預覽輸出）：Link

Answer 1

而不是單個可變this.selectedMonth，使用yearData.selectedMonth每年數據。

updated plunkr

HTML與{{yearData.selected}}

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

JS設置改變

添加selected關鍵在你OSDATA。

現在每行點擊，設置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]; 
      } 
     } 

    }