Фильтр стол в угловой

Question

У меня есть таблица с двумя опциями фильтра «Пол» и «Страна»!По сути, фильтр работает, то есть я нажимаю на раскрывающийся список полов для мужчин или женщин, и в таблице отображаются все записи.Моя проблема в том, как я это делал, мне всегда нужно обновить (как при перезагрузке данных) таблицу, прежде чем я смогу снова фильтровать.Скажем, у меня есть фильтр для женщин, я не могу напрямую щелкнуть по мужчине, чтобы показать мне мужские записи, мне нужно обновить, и тогда я могу только фильтровать снова.Я уверен, что это всего лишь одна или две строки кода, но я просто не могу понять это.

Ниже моих методов:

filterByGender(event) {
    let gender = event;
    if (gender === "Male") {
      gender = "M";
    } else if (gender === "Female") {
      gender = "F";
    }
    let filteredGender = this.customerArray
      .filter(customer => customer.gender === gender);
    console.log("filteredGender", filteredGender);
    this.customerArray = filteredGender;

  }

  filterByCountry(event) {
    let country = event;
    let filteredCountry = this.customerArray
      .filter(customer => customer.countryCode === country);
    this.customerArray = filteredCountry;
  }

this.customerArray - это массив всех клиентов из серверной части.Теперь причина не работает так, как я хочу, в том, что я пополняю массив, поэтому я не могу сделать второй фильтр, но как обойти это?

Answer 1

На самом деле вы можете использовать Angular Pipe с этим, если вы хотите фильтровать свою таблицу на основе выбранного значения в поле выбора.

Создано 2 Stackblitz Demo в зависимости от ваших предпочтений:

Труба с одним фильтром для списка таблиц - Фильтр только по полу

Труба с несколькими фильтрами выбора дляСписок таблиц - Фильтр по полу и стране

TableFilterPipe

Импорт TableFilterPipe на вашем модулеОбъявления

@Pipe({
   name: 'tableFilter'
})
export class TableFilterPipe implements PipeTransform {

   transform(list: any[], value: string) {

      // If there's a value passed (male or female) it will filter the list otherwise it will return the original unfiltered list. 
      return value ? list.filter(item => item.gender === value) : list;

   }
}

CustomComponent

@Component({
   ...,
   template: `
      <select [(ngModel)]="gender">
         <option value="male">Male</option>
         <option value="female">Male</option>
      </select>

      <table>
          ...
          <tr *ngFor="let user of users | tableFilter: gender">   // Use your pipe here, so whenever there's a change on selectbox, it will filter the list based on the value assigned. 
              <td>{{ user.name }}</td>
              <td>{{ user.gender }}</td>
          </tr>
      </table>

   `
})
export class CustomComponent {
   gender: string;

   users: any[] = [...];

}