Question

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

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

现在导航到卡片2018，然后点击Oct 18两个已打开的下拉列表中的值结果为Selected month: Oct，这也改变了之前选择的月份。是否有任何保持/显示之前选择的月份的方法。

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

Answer 1

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

使用{{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];
            }
         }

   }

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

1 个答案: