Filtro en Angular2 con MOCK.

K

Hola a todos, tengo un MOCK que simula un servicio en Angular 2, estoy intentando hacer un filtro en ese array para los anyos ya que en el HTML tengo un select con el año 2017 y 2018, lo que quiero es que me salgan las opciones que tienen el año 2017 cuando pulse en el select 2017 y viceversa:

Adjunto códigos:

import { ControlEstadoMes } from "app/core/api/control-horas/control-estado-mes.model";
import { ControlEstadoMesService } from "./control-estado-mes.service";
import { Observable } from "rxjs/Observable";
import { of } from "rxjs/observable/of";
import { IControlEstadoMesService } from "./control-estado-mes.interface";
import { Injectable } from "@angular/core";

export const MOCK_CONTROLESTADOMES: ControlEstadoMes[] = [
    { id: 0, mes: "Enero", anyo: 2017, bloqueado: true },
    { id: 1, mes: "Febrero", anyo: 2017, bloqueado: true },
    { id: 2, mes: "Marzo", anyo: 2017, bloqueado: true },
    { id: 3, mes: "Abril", anyo: 2017, bloqueado: true },
    { id: 4, mes: "Mayo", anyo: 2017, bloqueado: true },
    { id: 5, mes: "Junio", anyo: 2017, bloqueado: true },
    { id: 6, mes: "Julio", anyo: 2017, bloqueado: true },
    { id: 7, mes: "Agosto", anyo: 2017, bloqueado: true },
    { id: 8, mes: "Septiembre", anyo: 2017, bloqueado: true },
    { id: 9, mes: "Octubre", anyo: 2017, bloqueado: true },
    { id: 10, mes: "Noviembre", anyo: 2017, bloqueado: true },
    { id: 11, mes: "Diciembre", anyo: 2017, bloqueado: true },
    { id: 12, mes: "Enero", anyo: 2018, bloqueado: true },
    { id: 13, mes: "Febrero", anyo: 2018, bloqueado: true },
    { id: 14, mes: "Marzo", anyo: 2018, bloqueado: true },
    { id: 15, mes: "Abril", anyo: 2018, bloqueado: false },
    { id: 16, mes: "Mayo", anyo: 2018, bloqueado: false },
    { id: 17, mes: "Junio", anyo: 2018, bloqueado: false },
    { id: 18, mes: "Julio", anyo: 2018, bloqueado: false },
    { id: 19, mes: "Agosto", anyo: 2018, bloqueado: false },
    { id: 20, mes: "Septiembre", anyo: 2018, bloqueado: false },
    { id: 21, mes: "Octubre", anyo: 2018, bloqueado: false },
    { id: 22, mes: "Noviembre", anyo: 2018, bloqueado: false },
    { id: 23, mes: "Diciembre", anyo: 2018, bloqueado: false }
]

@Injectable()
export class ControlEstadoMesServiceMock implements IControlEstadoMesService {
    getControlEstadoMes(value: number): Observable<ControlEstadoMes[]> {
        return of(MOCK_CONTROLESTADOMES).filter(anyo == value);
    }
}
<div class="container-fluid">
  <div class="row">
    <div class="col">
      <h1>Bloquear Mes</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2">
      <div class="form-group">
        <select [(ngModel)]="opcionSeleccionada" class="form-control" id="anio">
          <option value="0">Selecciona un año:</option>
          <option>{{ anyoActual | date:'yyyy'}}</option>
          <option>{{ anyoAnterior | date:'yyyy'}}</option>
        </select>
      </div>
    </div>
  </div>
  <!-- Grid -->
  <div class="row">
    <div class="col" [hidden]="opcionSeleccionada == '0'">
      <kendo-grid [data]="gridData">
        <kendo-grid-column field="mes" title="Mes">

    </kendo-grid-column>
    <kendo-grid-column field="anyo" title="Año">
      
    </kendo-grid-column>
    <kendo-grid-column field="bloqueado" title="Bloquear">
        <ng-template kendoGridCellTemplate let-dataItem>
            <button type="button" class="btn btn-outline-danger" [disabled]="dataItem.bloqueado" (click)="bloquear()">Bloquear</button>
        </ng-template>
    </kendo-grid-column>
  </kendo-grid>
</div>
  </div>
</div>

Usuarios habituales