在所有下拉切换 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
。
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];
}
}
}
我在切换选项下显示数据,如果我点击其他月份,我会保持打开点击的 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
。
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];
}
}
}