>

드롭 다운에 데이터에서 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;
    }
}

단어 :

<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가 아닌 변환 함수 만 있습니다. 또한 년을 좋아하지 않습니다 : [] = []

  • 답변 # 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;
    }
    
    

  • 이전 java - Excel 파일을 S3 인 메모리로 스트리밍 하시겠습니까? ZipOutputStream의 ByteOutputStreamreset ()으로 인해 쓰기가 작동하지 않는 이유는 무엇입니까?
  • 다음 sql server - 전화 번호가 표시되는 캠페인 표시