Выпадающий список заполнен из данных json

Я хочу, чтобы в моем раскрывающемся списке отображались 2017 и 2018 мои данные. 2017 и 2018 много повторяются в моем файле данных json. Но я хочу, чтобы все данные за 2017 год отображались при выборе, а все данные за 2018 год отображались при выборе. В настоящее время в нем отображаются все данные, а раскрывающийся список переполнен.

Это HTML-код для раскрывающегося списка:

<div class = "row justify-content-center">
        <div class = "col-4s">
        <p>Financial Year:</p>
        </div>
        <div class = "col-4s">
            <select>
                <option *ngFor = "let volumes of volumes">{{ volumes.month | 
                 date: 'yyyy' }}</option>
            </select>
        </div>
    </div>

Код Angular4: класс экспорта VehicleVolumeEditComponent реализует OnInit {

volumes: Volumes[];
groupedVolumes : any;

constructor(private volumeService: VolumeService, private router: Router) { 
    this.volumeService.getVolumes().subscribe(volumes => {
        this.volumes = volumes;
        this.groupedVolumes = this.group(this.volumes);
        this.dataOk = true;
    }
}

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"
}
{
    "id": 10,
    "month": "2017-12-01"
}
{
    "id": 11,
    "month": "2018-01-01"
}
{
    "id": 12,
    "month": "2018-02-01"
}
{
    "id": 13,
    "month": "2018-03-01"
}
]