json - 从 json 数据填充的下拉列表

Question

我希望我的下拉菜单从我的数据中显示 2017 年和 2018 年。2017 年和 2018 年在我的 json 数据文件中重复了很多。但我希望在选择时显示所有 2017 年数据，并在选择时显示所有 2018 年数据。目前它显示所有数据，并且下拉列表被过度填充。有人告诉我尝试这个，但没有设法让它工作：

import {DatePipe} from '@angular/common';
.
.
volumes: Volumes[];
years: [] = [];
groupedVolumes : any;

constructor(private volumeService: VolumeService, private router: Router, private datePipe: DatePipe) { 

}


ngOnInit(){
    this.volumeService.getVolumes().subscribe(volumes => {
        this.volumes = volumes;
        for(let volume of volumes){
          if(this.years.indexOf(datePipe.formatDate(volume.month, 'yyyy')) === -1)
           this.years.push(datePipe.formatDate(volume.month, 'yyyy'));
        }
        this.groupedVolumes = this.group(this.volumes);
        this.dataOk = true;
    }

}

html:

<div class="row justify-content-center">
    <div class="col-4s">
    <p>Financial Year:</p>
    </div>
    <div class="col-4s">
        <select>
            <option *ngFor="let year of years">{{ year }}</option>
        </select>
    </div>
</div>

json文件：json文件：

[
{
    "id": 1,
    "month": "2017-03-01"
}
{
    "id": 2,
    "month": "2017-04-01"
}
{
    "id": 3,
    "month": "2017-05-01"
}
{
    "id": 4,
    "month": "2017-06-01"
}
{
    "id": 5,
    "month": "2017-07-01"
}
{
    "id": 6,
    "month": "2017-08-01"
}
{
    "id": 7,
    "month": "2017-09-01"
}
{
    "id": 8,
    "month": "2017-10-01"
}
{
    "id": 9,
    "month": "2017-11-01"
}]

问题在于 DatePipe。它只有一个转换函数而不是 formatDate。它也不喜欢年份：[] = []

Answer 1

ngOnInit() {
  this.years = this.volumeService.getVolumes().subscribe(volumes => {
    this.volumes = volumes;
    this.volumes.forEach(volume => {
      if(!this.years || !(this.years.some(year => year.includes(volume.month.split('-')[0])))) {
        this.years.push(volume.month.split('-')[0])
      }
  });
  this.groupedVolumes = this.group(this.volumes);
  this.dataOk = true;
}