Как использовать простой фильтр для пола - PullRequest
Новая
       13

Как использовать простой фильтр для пола

0 голосов
/ 26 ноября 2018

Я создаю простое приложение для управления клиентами и хочу отфильтровать мой список!У меня есть гендерный фильтр, и я хочу, чтобы он отображал всех клиентов мужского и женского пола по запросу.Я могу сделать это, так как я переопределил массив 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;
    }
}
...