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

Question

当我保持打开点击的卡片时，我在切换选项下显示数据。但如果我点击其他月份，所有其他灰色标题都具有先前选择的值。

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

现在导航到卡2018 并单击Oct 18，两个打开的下拉菜单中的值原来是Selected month: Oct，这也改变了先前选择的月份。有没有办法保留/显示之前选择的月份。

Plunker 链接（请在窗口模式下预览输出）：Link

Answer 1

而不是单个变量this.selectedMonth，使用yearData.selectedMonth 处理每年的数据。

updated plunkr

使用 {{yearData.selected}} 设置的 HTML

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

JS 变化

在您的 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];
            }
         }

   }