Discussion :

[paintbox]

Bonjour, je débute avec Angular.

J'ai une page qui affiche des produits classés par catégories. J'utilise pour cela une boucle *ngFor.
Pour éviter d'afficher à chaque fois la même catégorie, je cherche un moyen pour "stocker" la catégorie en cours dans une variable puis comparer avec la nouvelle catégorie. S'il s'agit bien d'une nouvelle catégorie je l'affiche et continue jusqu'à la nouvelle suivante.

Existe-t-il un moyen pour sauver cette donnée catégorie?

J'ai cherché dans la doc et divers tutos mais je n'ai rien trouvé.

Merci pour votre aide

[krakatoa]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<    *ngFor="p of ..."
    <   *ngIf="checkCategory(p.category)"   > {{p.category.name}}
 
 
....
 
categoryDisplaying = '';
 
checkCategory(category) {
 
  if (this.categoryDisplaying == category) {
     return false;
  } else {
     this.categoryDisplaying = category;
     return true;
  }
}

[paintbox]

Bonsoir Krakatoa,

merci pour ton aide.

je n'arrive toujours pas à attribuer une valeur à la variable "previousCategory". Elle reste "undefined" dans mon fichier component.ts.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<ng-container *ngFor='let m of menu;'>
    <app-menu-view [previousCategory]="m.category.description"></app-menu-view>
    <article *ngIf="checkCategory(m.category.description) === true">
        <ul class="plats">
          <li>
            {{m.category.description}}
            {{m.title | uppercase}}
            <span class="price">{{m.prix}}</span>
            <span class="ingredients">{{m.ingerdients}}</span>
          </li>
        </ul>
    </article>
  </ng-container>

Est-ce que je m'y prend mal?
Merci

[dukoid]

montre le code

[paintbox]

Merci aussi pour ton aide dukoid,

voici le code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
  <ng-container *ngFor='let m of menu;'>
    <article *ngIf="checkCategory(m.category.description)">
      <h2>{{m.category.description |uppercase}}</h2>
      <ul class="plats">
        <li>
          {{m.title | uppercase}}
          <span class="price">{{m.prix}}</span>
          <span class="ingredients">{{m.ingerdients}}</span>
        </li>
      <app-menu-view [previousCategory]="m.category.description"></app-menu-view>  
    </ul>
    </article>
  </ng-container>

De plus, je voudrais fermer les </ul> et </article> avant d'afficher la balise <article> dans le cas où je commence une nouvelle catégorie ou dans le cas de la première

et la fonction checkCategory

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export class MenuViewComponent implements OnInit {
  @Input() previousCategory: string;
  menu: IMenu[];
  error = 'Erreur chargement menu';
  constructor(private menuService: MenuService) { }
 
  // Consommation du service
  ngOnInit() {
    this.menuService.loadMenu().subscribe(
      menu => { this.menu = menu; },
      error => { console.log(error); }
    );
  }
 
  checkCategory(category: string): boolean{
    return (this.previousCategory !== category);
  }
}

Je ne vois où je boucle.

Merci

[krakatoa]

essaye ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ng-container *ngIf='menu'>
  <ng-container *ngFor='let m of menu;'>
 
    <ng-container *ngIf="checkCategory(m.category.description)">
      <article >
        <h2>{{m.category.description |uppercase}}</h2>
          <ul class="plats">
            <li>
              {{m.title | uppercase}}
              <span class="price">{{m.prix}}</span>
              <span class="ingredients">{{m.ingerdients}}</span>
            </li>
          <app-menu-view [previousCategory]="m.category.description"></app-menu-view>  
        </ul>
      </article>
    </ng-container>
 
  </ng-container>
</ng-container>