Угловой фильтр флажка с помощью трубы

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

Флажок - следующий код создает флажки в компоненте.

<div *ngFor="let b of prod.brand">
  <input type="checkbox" value="{{b.BrandName}}" id="{{b.id}}" name="brandArray" [(ngModel)]="b[BrandSelected]">
  <label for="{{b.id}}">{{b.BrandName}}</label>
</div>

Список продуктов - следующий код используется для получения списка продуктов.

<div *ngFor="let prod of productListShow">
<div class="col-md-4" *ngFor="let product of prod.product | selectBrand: brandType">
<div class="sp-list-inner">
<figure>
    <a href="#" target="_blank">
        <img src="{{product.productImage}}" alt="{{product.productImageAlt}}">
        <figcaption>
            <h5 class="product-inner-title">{{product.productName}}</h5>
        </figcaption>
    </a>
</figure>
</div>
</div>
</div>

Канал с флажком. В следующем коде я столкнулся с проблемой фильтрации продуктов, когда установлен конкретный флажок.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'selectBrand'
})
export class SelectBrandPipe implements PipeTransform {

  transform(brand: any, brandType?: any): any {
    console.log('brand', brandType);
    if (!brandType || brandType.length === 0) return brand;
    return brand.filter(brandName => 
    brandType.includes(brandName.companyName));
  }

}

Я использую этот список, который вызывается службой. В этой службе я использовал productList: Products[]; для следующего списка:

export const PRODUCTS: Products[] = [
{
    id: 1,
    productCat:'Jeans',
    brand: [
        {
            brandId: 'B1',
            BrandName: 'Brand-1',
            BrandSelected: true
        },
        {
            brandId: 'B2',
            BrandName: 'Brand-2',
            BrandSelected: true
        },
    ],
    product: [
        {
            productId: 2,
            productName: 'Brand 2 prod',
            companyName: 'Brand-1',
        },
        {
            productId: 3,
            productName: 'Brand 2 prod',
            companyName: 'Brand-2',
        },
    ],
},
]

Пожалуйста, посоветуйте, как я могу это исправить. Если есть и другой метод, кроме трубы, поделитесь


angular angular-pipe
person Akshay    schedule 15.05.2018    source источник
comment
в чем проблема?   -  person Abhishek Singh    schedule 15.05.2018
comment
Привет, @AbhishekSingh, продукты не фильтруются.   -  person Akshay    schedule 15.05.2018
comment
В консоли отображается ошибка brand undefined в трубе   -  person Akshay    schedule 15.05.2018

Ответы (1)


arrow_upward
1
arrow_downward

brandType не определено в компоненте. Проверьте файл компонента (заканчивающийся на .ts) и посмотрите, определен ли brandType (это не должно быть).

Проверить эту гипотезу будет проще всего, просто передав некоторую строку в канал и увидев, скажет ли она что-нибудь кроме undefined.

ака.

<div class="col-md-4" *ngFor="let product of prod.product | selectBrand: 'car-brand'">

если он затем внесет в канал «марку автомобиля» из журнала console.log, то вы определенно узнаете, что существует проблема с инициализацией переменной brandType.

РЕДАКТИРОВАТЬ 1:

Чаще всего вы инициализируете и изменяете свои переменные в компоненте. Ака.

@Component..
export class ComponentA implements OnInit {
    public brandType: string = 'car';

    ngOnInit() { }
}
person Karl Johan Vallner    schedule 15.05.2018
comment
Привет @ Карл Да, это говорит brand car. Как я могу его инициализировать, и в нем говорится, что бренд undefiend, а не brandType - person Akshay; 16.05.2018
comment
Если это решило вашу проблему, отметьте это также как ответ! - person Karl Johan Vallner; 17.05.2018
comment
Привет! @Karil Это еще не решено. Я все еще работаю над этим - person Akshay; 19.05.2018