Как отфильтровать массив по Boolean в Angular?

Question

Привет! Я новичок в Angular и в настоящее время работаю над способом сортировки массива, созданного с использованием * ngFor.

Я бы хотел использовать input флажки для фильтрации. Например, я установил свойства объектов ...

PersonalInvestment: boolean; Это для определения типа, но исходя из того, что это логическое значение, я бы хотел показать или скрыть объект из массива. Я следовал курсу Деборы Кураты по Pluralsight и в своем уроке она фильтрует массив на основе строкового значения, которое она вводит в свою строку ввода.

Это код получения и установки, который она использует вместе со своей функцией для фильтрации:

  get listFilter(): string {
    return this._listFilter;
  }
  set listFilter(value: string) {
    this._listFilter = value;
    this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter) : this.products;
  }

и функция performFilter далее в компоненте:

performFilter(filterBy: string): IProduct[] {
    filterBy = filterBy.toLocaleLowerCase();
    return this.products.filter((product: IProduct) =>
      product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
  }

Итак, с моими ограниченными знаниями я попытался использовать аналогичный подход:

  _personalFilter: boolean;
    get personalFilter(): boolean {
        return this._personalFilter;
    }
    set personalFilter(value: boolean){
        this._personalFilter = value;
        this.filteredBrands = this.personalFilter ? this.performFilter(this.personalFilter) : this.brands;
    }

и моя функция:

    performFilter(filterBy: boolean): Brands[] {
        return this.brands.filter((brand: Brands) =>
            brand.PersonalInvestment.valueOf = function () {
                return this.filterBy;
            });
  }

В настоящее время я получаю эту ошибку:

Я, очевидно, знаю, что мой код в корне неверен, но для меня это совершенно новая концепция, и мне пока ничего в StackOverflow не помогло. Огромное спасибо заранее.

EDIT:

Это мое поле ввода:

<input type="checkbox" name="Personal" value="Personal" [(ngModel)]="personalFilter"/> Personal<br />

и это начало div для * ngFor:

<div *ngFor="let brand of filteredBrands">

Answer 1

Мне удалось выяснить способ фильтрации моего списка по полю ввода:

Это пример одного из полей ввода в моем HTML:

<input type="checkbox" name="Personal" value="Personal" [(ngModel)]="Personal" (change)="checkValue(Personal, property='personal')" /> Personal<br />

Затем в моем JSON у меня есть список свойств, прикрепленных к каждой карточке, которые я пытаюсь отфильтровать следующим образом:

   {
        "Id": 5,
        "Title": "5th Brand Test With Advanced Property",
        "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin ornare lectus, quis gravida tortor venenatis nec. ",
        "Properties": ["personal", "listedItems"],

   },

Затем я фильтрую его следующим образом в моем компоненте:

brands: ExploreCards.IBrand[];
visibleBrands: ExploreCards.IBrand[] = [];
filteredProperties = [];

checkValue(event: any, property: string) {

    if (event == true) {
      this.filteredProperties.push(property);
      for (var i = this.filteredProperties.length - 1; i >= 0; i--) {
        if (this.filteredProperties[i] == property) {
          this.visibleBrands = this.brands.filter(item => item.Properties.some(property => this.filteredProperties.indexOf(property) > -1));

        }
      }
    } else {
      for (var i = this.filteredProperties.length - 1; i >= 0; i--) {
        if (this.filteredProperties[i] == property) {
          this.filteredProperties.splice(i, 1);
        }
      }
      this.visibleBrands = this.brands.filter(item => item.Properties.some(property => this.filteredProperties.indexOf(property) > -1));
    }
    if (this.filteredProperties.length === 0) {
      this.visibleBrands = this.brands;
    }
  }


  ngOnChanges() {
    this.visibleBrands = this.brands.slice(0);
  }

  ngOnInit(): void {
    this.brands = this.brandService.getBrands();
    this.visibleBrands = this.brands;
  }

Надеюсь, это поможет кому-то еще в будущем! :)

Answer 2

Изменить на это:

function performFilter(filterBy: boolean): any[] {
    return this.brands.filter((brand: any) =>
        brand.PersonalInvestment = filterBy);
}