Comment filtrer les éléments à l'intérieur de “ngFor” en boucle, basée sur la propriété de l'objet string

J'ai besoin de filtrer les éléments à l'intérieur d'un ngFor boucle, par la modification de la catégorie dans la liste déroulante. Par conséquent, quand une catégorie est sélectionnée dans la liste, il doit mentionner les éléments contenant la même catégorie.

Modèle HTML:

<select>
  <option *ngFor="let model of models">{{model.category}}</option>
</select>

<ul class="models">
  <li *ngFor="let model of models" (click)="gotoDetail(model)">
  <img [src]="model.image"/>
  {{model.name}},{{model.category}}
  </li>
</ul>

Éléments De Tableau:

export var MODELS: Model[] = [
{ id: 1, 
  name: 'Model 1', 
  image: 'img1', 
  category: 'Cat1', 
},

{ id: 2, 
  name: 'Model 2', 
  image: 'img2', 
  category: 'Cat3',
},

{ id: 3, 
  name: 'Model 3', 
  image: 'img3', 
  category: 'Cat1',
},
{ id: 4, 
  name: 'Model 4', 
  image: 'img4', 
  category: 'Cat4',
},

...
];

Aussi, la liste déroulante contient répété les noms de catégorie. Il est nécessaire pour une liste unique des catégories (chaînes de caractères).

Je sais que la création d'une coutume pipe serait la bonne façon de le faire, mais je ne sais pas comment l'écrire.

Plunker: http://plnkr.co/edit/tpl:2GZg5pLaPWKrsD2JRted?p=preview

Pourquoi ne pas faire ce filtrage dans le code du composant? Vous pourriez le faire par exemple *ngFor="let model of filteredModels" et écrire get filteredModels() { ... } à fournir. On pourrait faire la même chose pour donner un tableau d'entrées uniques pour le select élément.
"je sais que la création d'une coutume pipe serait la bonne façon de le faire" - ce qui vous a amené à cette conclusion? "mais je ne sais pas comment écrire" - alors, avez-vous envisagé de l'apprentissage?
Assurez-vous jonrsharpe :). Je suis un novice et j'espère que je vais trouver le bon chemin. J'ai lu beaucoup de posts sur le filtrage de l'angle de 2, personnalisé tuyaux sont principalement visé le bon choix ..

OriginalL'auteur gundra | 2016-11-19

  1. 18

    Voici un exemple de tuyau:

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

@Pipe({
    name: 'matchesCategory'
})
export class MathcesCategoryPipe implements PipeTransform {
    transform(items: Array<any>, category: string): Array<any> {
        return items.filter(item => item.category === category);
    }
}

    Pour l'utiliser:

    <li *ngFor="let model; of models | matchesCategory:model.category" (click)="gotoDetail(model)">

    ===== pour la plunkr exemple ====

    Vous avez besoin de sélectionner des modifications pour refléter dans certains variable

    D'abord définir dans votre classe un membre:

    selectedCategory: string;

    puis mettre à jour votre modèle:

    <select (change)="selectedCategory = $event.target.value">
   <option *ngFor="let model of models ">{{model.category}}</option>
</select>

    dernier, l'utilisation de la pipe:

      <li *ngFor="let model; of models | matchesCategory:selectedCategory" (click)="gotoDetail(model)">

    ==== commentaires après avoir vu le plunker ====

    J'ai remarqué que vous avez utilisé promesse. Angular2 est plus rxjs orienté. Donc, la première chose que je ferais le changement est à votre service, remplacer:

    getModels(): Promise<Model[]> {
  return Promise.resolve(MODELS);
}

    : 

    getModels(): Observable<Array<Model>> {
  return Promise.resolve(MODELS);
}

    et

    getModels(id: number): Observable<Model> {
  return getModels().map(models => models.find(model.id === id);
}

    puis dans votre ModelsComponent

    models$: Observable<Array<Model>> = svc.getModels();
uniqueCategories$: Observable<Array<Model>> = this.models$
  .map(models => models.map(model => model.category)
  .map(categories => Array.from(new Set(categories)));

    Vos options sont:

         <option *ngFor="let category; of uniqueCategories$ | async">{{model.category}}</option>

    et votre liste:

          <li *ngFor="let model; of models$ | async | matchesCategory:selectedCategory" (click)="gotoDetail(model)">

    C'est un très venteux solution, car vous avez de nombreux doublons et vous garder en interrogeant le service. Prenez cela comme un point de départ et d'interroger le service qu'une seule fois, alors dériver des valeurs spécifiques à partir du résultat que vous avez obtenu.

    Si vous voulez vous garder au code, il suffit de mettre en œuvre un UniqueValuesPipe, sa transformation obtiendrez un seul paramètre et le filtre de retour des catégories uniques à l'aide de la Array.from(new Set(...)). Vous aurez besoin de bien faire correspondre à cordes (catégories) d'abord.

    Grâce Meir, je vais essayer de mettre en œuvre ce code dans mon projet, pour voir si elle donne suite. Je vais revenir à vous... thx
    Meir, quand j'ai essayé de filtrer les éléments à l'aide de ce code, la console me lance un message d'erreur "Impossible de lire la propriété de "catégorie " undefined"
    ajouter un point de rupture (ou de la console.journal(articles, catégorie) dans la partie supérieure de la fonction et de voir qu'il obtient les valeurs de droite
    et si cela ne fonctionne pas, mettez votre pleine mise en œuvre sur plnkr afin que je puisse avoir un coup d'oeil
    vous avez une faute de frappe dans MathcesCategoryPipe (Matsces)

    OriginalL'auteur Meir