如何使用简单的性别过滤器

Question

我正在创建一个简单的客户管理应用程序，并希望通过我的列表进行过滤！我有一个性别过滤器，希望它在要求时显示所有男性/女性顾客。我能够做到这一点，因为我重新声明了customerArray，所以我实际上只能使用一次，然后必须刷新页面才能再次使用它。一定有办法解决这个问题，也许是ngModel？任何提示，不胜感激！下面是我的代码！

<div class="allCustomers">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="navigation">
          <i routerLink="/homepage" routerLinkActive="active" class="fas fa-home"></i> / View Customers
        </div>
      </div>
      <div class="col">
        <div class="navbar">
          Filter:
          <div class="dropdown">
            <button class="dropbtn btn btn-outline-primary btn-sm ml-2">Gender
              <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content">
              <a (click)="displayAllMale()">Male</a>
              <a (click)="displayAllFemale()">Female</a>
            </div>
          </div>
          <div class="dropdown">
            <button class="dropbtn btn btn-outline-primary btn-sm ml-2">Country
              <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content">
              <a href="#">AT</a>
              <a href="#">US</a>
              <a href="#">IN</a>
              <a href="#">DE</a>
              <a href="#">TB</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row justify-content-center">
      <div>
        <h1> List of all customers: </h1>
      </div>
    </div>
    <div class="row">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Country</th>
            <th scope="col">Gender</th>
            <th scope="col">Age</th>
            <th scope="col">Edit</th>
            <th scope="col">Delete</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let customer of customerArray; let i = index">
            <td>{{i + 1}}</td>
            <td>{{customer.firstname}}</td>
            <td>{{customer.lastname}}</td>
            <td>{{customer.countryCode}}</td>
            <td>{{customer.gender}}</td>
            <td>{{customer.age}}</td>
            <td><i class="fas fa-edit"></i></td>
            <td><i class="fas fa-trash-alt"></i></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

这是我的角度代码：

customerArray: [];

  constructor(
    private http: HttpClient
  ) { }

  ngOnInit() {
    this.http.get('http://www.mocky.io/v2/5bfb15823200006d00bee442')
      .subscribe((data) => {
        this.customerArray = data;
        console.log(this.customerArray);
      }
    }

// works but not quite because customerArray get overriden

    displayAllMale() {
      let filterForMale = this.customerArray
        .filter(customer => customer.gender === "M");
      this.customerArray = filterForMale;
    }

    displayAllFemale() {
      let filterForFemale = this.customerArray
        .filter(customer => customer.gender === "F");
      this.customerArray = filterForFemale;
    }
}