在所有下拉切换 div 的 angular 中保留所选月份 4

Persist selected month in all dropdown toggle div's angular 4

我在切换选项下显示数据,如果我点击其他月份,我会保持打开点击的 card.But 所有其他灰色 headers 都具有之前选择的值。

我正在寻找一种方法来将 Selected month 下的值保留为实际选择的方式。 例如: :我第一次在卡片 2017 下选择值 Apr 1 ,下拉切换 div 显示为 Selected month :Apr .

现在导航到卡片 2018 并单击 Oct 18 两个打开的下拉列表中的值原来是 Selected month: Oct,这会将之前选择的月份更改为 well.Is 有什么方法可以 persist/display 之前选择的月份。

Plunker link(请在窗口模式下预览输出):Link

而不是单一变量 this.selectedMonth,对每年的数据使用 yearData.selectedMonth

updated plunkr

HTML set with {{yearData.selected}}

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

JS changes

在您的 osData 中添加 selected 键。

现在点击每一行,设置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];
            }
         }

   }