Как отфильтровать данные в таблице на основе выпадающего списка (Angular 8)?

Question

У меня есть таблица, которая получает данные из API. Я пытаюсь отфильтровать данные в таблице, когда пользователь выбирает из выпадающего списка. Это лучший подход? Раскрывающийся список и таблица исчезают, как только я меняю параметр из раскрывающегося списка. Я также приложил изображения ниже того, что происходит до и после выбора пользователем опции. Есть ли другой, более эффективный способ?

projects.component.ts

import { Component, Inject, OnInit, Pipe, PipeTransform, ElementRef, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DatePipe } from '@angular/common';



@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.css']
})

export class ProjectsComponent implements OnInit {

  public projects: vwMPLanding[];
  public cacheProjects: vwMPLanding[];



  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    let apiUrl = baseUrl + "api/majorprojects";
    console.log('[apiUrl]', apiUrl);
    http.get<vwMPLanding[]>(apiUrl).subscribe(result => {
      this.projects = result;
      this.cacheProjects = result;
      console.log(this.projects);

    }, error => console.error(error));

  }
  filterProjects(filterVal: any) {
    if (filterVal == "0")
      this.projects = this.cacheProjects;
    else
      this.projects = this.cacheProjects.filter((item) => (item.State) == filterVal);
  }


  ngOnInit() {

  }

}


interface vwMPLanding {
  ProjectId: number;
  legacyId: number;
  ProjectName: string;
  ProjectDesc: string;
  Status: string;
  Location: string;
  State: string;
  Abbrv: string;
}

projects.component. html

  <div class="table-responsive">
    <table class="table table-striped table-sm" id="test">

      <thead>
        <tr>
          <th width="18%">
              <select (change)="filterProjects($event.target.value)">
                 <option value="0">All States</option>
                 <option *ngFor="let project of projects | distinct: 'state'" [value]="project.state">
                    {{project.abbrv + '-' + project.state }}
                 </option>
              </select>
          </th>
          <th>Project Name</th>
          <th width="20%">Location</th>
          <th width="10%">Status</th>
          <th width="15%">Cost (in $M)</th>
        </tr>
      </thead>

      <tbody>
          <tr *ngFor="let project of projects; index as i">
             <td>{{ project.abbrv + '-' + project.state }}</td>
             <td>{{ project.projectName }}</td>
             <td>{{ project.location }}</td>
             <td>{{ project.status }}</td>
             <td>{{ project.cost }}</td>
          </tr>
      </tbody>
   </table>

 </div>

Перед выбором пользователя опция После выбора пользователем опции