Угловая 4 труба для флажка не работает должным образом - PullRequest
Новая
       6

Угловая 4 труба для флажка не работает должным образом

0 голосов
/ 31 мая 2018

Привет, я новичок в угловых и пытаюсь создать трубу фильтра флажков anuglar для фильтрации данных моих продуктов! Здесь я создал цвета для флажков в моем файле .ts (я не включил код, который не являетсяотношение к этой проблеме) 

public colors: any[] = [
{
  id: 1,
  color: "Black",
  selected: true,
},
{
  id: 2,
  color: "Green",
  selected: true,
}
]

Я использую канал для флажков - 

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'selectBrand'
})
export class SelectBrandPipe implements PipeTransform {
    transform(check: any, checked?: any): any {
        console.log('checked', checked);
        return checked ? check.filter(sal => sal.type === checked) : check;
    }
}

В моем HTML-файле - 

<form>
    <div class="form-check brand-checkbox" *ngFor="let col of colors">
      <input class="form-check-input" 
             type="checkbox" 
             value="{{col.id}}" 
             id="{{col.id}}" 
             name="" 
             [(ngModel)]="col.selected">

      <label class="form-check-label" for="{{col.id}}">
        {{col.productColor}}
      </label>
    </div>
</form>

<div class="shop" *ngFor="let prod of productListShow">
    <div class="col-md-4" *ngFor="let product of prod.product | selectBrand: colors">
            <h5>{{product.productName}}</h5>
    </div>
</div>

Я получаюданные о продуктах из службы - 

{
    id: 1,
    productName:'Products',
    product: [
        {
            productId: 1,
            productName: 'Shirt 1',
            productColor: 'Green',
        },
        {
            productId: 2,
            productName: 'Shirt 2',
            productColor: 'Black',
        },
    ],
},

Когда код выполняется, все флажки установлены, и я не вижу продуктов и в своем журнале консоли.Я получаю - 

checked 
(2) [{…}, {…}]
0
:
{id: 1, productColor: "Black", selected: true}
1
:
{id: 2, productColor: "Green", selected: true}
length
:
2
__proto__
:
Array(0)

Ответы [ 2 ]

0 голосов
/ 11 июня 2018

NgModel для флажка: 

<input id="colId{{i}}"  [checked]="col.active" class="" (change)=" col.active = !col.active" type="checkbox">
<label for="colId{{i}}" ></label>
0 голосов
/ 01 июня 2018

вы передаете продукты Array as check и colors Array as check в вашу функцию pipeTransform.Затем вы проверяете, равен ли product.type (который, кстати, не существует в соответствии с определением модели вашей продукции) цвету Array.Я думаю, это не то, что вы хотите проверить.

Попробуйте: 

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

@Pipe({
    name: 'selectBrand',
    pure: false
})
export class SelectBrandPipe implements PipeTransform {
transform(products: any[], colors: any[]): any {

    const activeColors = colors.filter(c => c.selected).map(c => c.color)
    console.log('checked colors', activeColors.join(","));
    return products.filter(p => activeColors.includes(p.productColor));
    }
}

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

Я рекомендую фильтровать товары только в том случае, если пользователь изменяет статус флажка, добавляя (ngModelChange) к элементу ввода флажка, например: 

<input class="form-check-input" 
             type="checkbox" 
             value="{{col.id}}" 
             id="{{col.id}}" 
             name="" 
             [(ngModel)]="col.selected"
             (ngModelChange)="filterProducts()">

В вашемдля машинописи компонентов добавьте функцию filterProducts, которая выполняет фильтрацию: 

  public filterProducts(): void {
    const filteredProductArray = new Array<any>();
    const activeColors = this.colors.filter(c => c.selected).map(c => c.color);
    this.productListShow.forEach(prod => {
        const filteredSubProducts = prod.product.filter(p => activeColors.includes(p.productColor));
         if(filteredSubProducts.length > 0){
             const clonedProduct = Object.assign({}, prod);
             clonedProduct.product = filteredSubProducts;
             filteredProductArray.push(clonedProduct);
         }
    });
    this.filteredProducts = filteredProductArray;
}

, а затем использует фильтрованные продукты в ngFor вместо productListShow

...