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>

[paintbox]

Bonjour Krakatoa,

j'ai testé ta proposition.
J'ai toujours une boucle infinie et une même catégorie apparaît plusieurs fois.

Je ne vois pas d'où vient cette boucle.
Merci

[dukoid]

tu peux me donner le résultat de ça :

Code :

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

1
2
3
4
 
 <ng-container *ngFor='let m of menu;'>
{{m|json}}
  </ng-container>

[paintbox]

Hello Dukoid,

cela me retourne bien les données.

Code :

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

1
2
 
{ "title": "Salade Caprese", "ingredients": "Tomattes, basilic, mozarella, huile d'olive, vinaigre balsamique", "idCategory": 1, "category": { "link": "EntreeFroides", "isDeleted": false, "description": "Entrée froides" }, "price": 11.5, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis leo diam, non congue odio laoreet nec. Duis accumsan sollicitudin pharetra. Sed congue in magna id facilisis. In et cursus erat, nec commodo purus. Integer non ornare erat. Aliquam turpis ante, elementum tempus finibus vel, faucibus eu velit. Pellentesque gravida libero sed nisl imperdiet pulvinar. Mauris malesuada, nunc ac suscipit sagittis, velit lorem sollicitudin urna, ac fringilla nibh ante a magna. Nulla a ipsum feugiat, volutpat neque sed, condimentum felis. Nam convallis, odio sed tempor convallis, ligula urna laoreet dui, a imperdiet lectus enim porttitor sapien. Mauris molestie lobortis lacus, vel vehicula quam finibus ut. Sed feugiat mollis sem, eget vulputate nisl convallis dictum. " } { "title": "Carpaccio de boeuf", "ingredients": "Boeuf, parmesan, roquette, huile d'olive, citrons, pignons", "idCategory": 1, "category": { "link": "EntreeFroides", "isDeleted": false, "description": "Entrée froides" }, "price": 14.5, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis leo diam, non congue odio laoreet nec. Duis accumsan sollicitudin pharetra. Sed congue in magna id facilisis. In et cursus erat, nec commodo purus. Integer non ornare erat. Aliquam turpis ante, elementum tempus finibus vel, faucibus eu velit. Pellentesque gravida libero sed nisl imperdiet pulvinar. Mauris malesuada, nunc ac suscipit sagittis, velit lorem sollicitudin urna, ac fringilla nibh ante a magna. Nulla a ipsum feugiat, volutpat neque sed, condimentum felis. Nam convallis, odio sed tempor convallis, ligula urna laoreet dui, a imperdiet lectus enim porttitor sapien. Mauris molestie lobortis lacus, vel vehicula quam finibus ut. Sed feugiat mollis sem, eget vulputate nisl convallis dictum. " } { "title": "Capraccio de saumon", "ingredients": "façon chef", "idCategory": 1, "category": { "link": "EntreeFroides", "isDeleted": false, "description": "Entrée froides" }, "price": 17, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis leo diam, non congue odio laoreet nec. Duis accumsan sollicitudin pharetra. Sed congue in magna id facilisis. In et cursus erat, nec commodo purus. Integer non ornare erat. Aliquam turpis ante, elementum tempus finibus vel, faucibus eu velit. Pellentesque gravida libero sed nisl imperdiet pulvinar. Mauris malesuada, nunc ac suscipit sagittis, velit lorem sollicitudin urna, ac fringilla nibh ante a magna. Nulla a ipsum feugiat, volutpat neque sed, condimentum felis. Nam convallis, odio sed tempor convallis, ligula urna laoreet dui, a imperdiet lectus enim porttitor sapien. Mauris molestie lobortis lacus, vel vehicula quam finibus ut. Sed feugiat mollis sem, eget vulputate nisl convallis dictum. " } { "title": "Mozzarella di bufala semi freddo", "ingredients": "courgette, oignons rouge et tomates cerises ", "idCategory": 1, "category": { "link": "EntreeFroides", "isDeleted": false, "description": "Entrée froides" }, "price": 14.5, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis leo diam, non congue odio laoreet nec. Duis accumsan sollicitudin pharetra. Sed congue in magna id facilisis. In et cursus erat, nec commodo purus. Integer non ornare erat. Aliquam turpis ante, elementum tempus finibus vel, faucibus eu velit. Pellentesque gravida libero sed nisl imperdiet pulvinar. Mauris malesuada, nunc ac suscipit sagittis, velit lorem sollicitudin urna, ac fringilla nibh ante a magna. Nulla a ipsum feugiat, volutpat neque sed, condimentum felis. Nam convallis, odio sed tempor convallis, ligula urna laoreet dui, a imperdiet lectus enim porttitor sapien. Mauris molestie lobortis lacus, vel vehicula quam finibus ut. Sed feugiat mollis sem, eget vulputate nisl convallis dictum. " } { "title": "Scampis du chef ", "ingredients": "poivrons, champignon, tomate-crème ", "idCategory": 2, "category": { "link": "EntreeChaudes", "isDeleted": false, "description": "Entrée chaudes" }, "price": 14.5, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis leo diam, non congue odio laoreet nec. Duis accumsan sollicitudin pharetra. Sed congue in magna id facilisis. In et cursus erat, nec commodo purus. Integer non ornare erat. Aliquam turpis ante, elementum tempus finibus vel, faucibus eu velit. Pellentesque gravida libero sed nisl imperdiet pulvinar. Mauris malesuada, nunc ac suscipit sagittis, velit lorem sollicitudin urna, ac fringilla nibh ante a magna. Nulla a ipsum feugiat, volutpat neque sed, condimentum felis. Nam convallis, odio sed tempor convallis, ligula urna laoreet dui, a imperdiet lectus enim porttitor sapien. Mauris molestie lobortis lacus, vel vehicula quam finibus ut. Sed feugiat mollis sem, eget vulputate nisl convallis dictum. " } { "title": "Polipo \"locanda sant'Ambrogio\" ", "ingredients": "poulpes sautées aux poivrons, courgettes, aubergines", "idCategory": 2, "category": { "link": "EntreeChaudes", "isDeleted": false, "description": "Entrée chaudes" }, "price": 16, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis leo diam, non congue odio laoreet nec. Duis accumsan sollicitudin pharetra. Sed congue in magna id facilisis. In et cursus erat, nec commodo purus. Integer non ornare erat. Aliquam turpis ante, elementum tempus finibus vel, faucibus eu velit. Pellentesque gravida libero sed nisl imperdiet pulvinar. Mauris malesuada, nunc ac suscipit sagittis, velit lorem sollicitudin urna, ac fringilla nibh ante a magna. Nulla a ipsum feugiat, volutpat neque sed, condimentum felis. Nam convallis, odio sed tempor convallis, ligula urna laoreet dui, a imperdiet lectus enim porttitor sapien. Mauris molestie lobortis lacus, vel vehicula quam finibus ut. Sed feugiat mollis sem, eget vulputate nisl convallis dictum. " } { "title": "Scampis“Pianno”", "ingredients": "Beignets de scampis, sauce tartare, salade", "idCategory": 2, "category": { "link": "EntreeChaudes", "isDeleted": false, "description": "Entrée chaudes" }, "price": 17.5, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur orci nec tincidunt dignissim. Aenean pharetra, tortor scelerisque faucibus suscipit, ligula quam condimentum purus, vitae accumsan eros mauris ut est. Nullam ac elit mauris. Aliquam interdum magna non efficitur sodales. Curabitur gravida venenatis mattis. Aliquam aliquam sit amet nunc vitae mattis. Sed non diam lorem. Duis nec augue vitae orci fermentum dignissim eget eu eros. Nullam consectetur lorem at venenatis aliquet. Nulla non maximus arcu, ac blandit lorem." } { "title": "Melanzane Goustosa", "ingredients": "Gâteau d’aubergines, mozzarella tomate gratiné au parmesan", "idCategory": 2, "category": { "link": "EntreeChaudes", "isDeleted": false, "description": "Entrée chaudes" }, "price": 14.9, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur orci nec tincidunt dignissim. Aenean pharetra, tortor scelerisque faucibus suscipit, ligula quam condimentum purus, vitae accumsan eros mauris ut est. Nullam ac elit mauris. Aliquam interdum magna non efficitur sodales. Curabitur gravida venenatis mattis. Aliquam aliquam sit amet nunc vitae mattis. Sed non diam lorem. Duis nec augue vitae orci fermentum dignissim eget eu eros. Nullam consectetur lorem at venenatis aliquet. Nulla non maximus arcu, ac blandit lorem." } { "title": "Margherita", "ingredients": "Coulis de tomates, mozzarella", "idCategory": 3, "category": { "link": "Pizzas", "isDeleted": false, "description": "Pizzas" }, "price": 11.5, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque blandit tellus, sed cursus felis ullamcorper fringilla. Nam consequat orci sit amet lacus viverra mollis. In hac habitasse platea dictumst. Mauris consectetur est maximus felis pulvinar malesuada. Cras congue, neque gravida iaculis interdum, tortor lacus ultricies ante, sit amet lacinia mauris ligula eu sem. Suspendisse finibus euismod arcu id interdum. Vestibulum quis eleifend purus, at gravida tortor. Vestibulum at lorem ut leo rutrum fermentum. Suspendisse eu viverra nisl, tempus lobortis sapien. Mauris tellus est, luctus sed porttitor eget, ornare ut libero. Etiam pretium, ipsum ac sollicitudin vulputate, turpis turpis tincidunt urna, at consequat eros nibh quis leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. " } { "title": "Prosciutto", "ingredients": "Coulis de tomates, mozzarella, jambon", "idCategory": 3, "category": { "link": "Pizzas", "isDeleted": false, "description": "Pizzas" }, "price": 14.5, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque blandit tellus, sed cursus felis ullamcorper fringilla. Nam consequat orci sit amet lacus viverra mollis. In hac habitasse platea dictumst. Mauris consectetur est maximus felis pulvinar malesuada. Cras congue, neque gravida iaculis interdum, tortor lacus ultricies ante, sit amet lacinia mauris ligula eu sem. Suspendisse finibus euismod arcu id interdum. Vestibulum quis eleifend purus, at gravida tortor. Vestibulum at lorem ut leo rutrum fermentum. Suspendisse eu viverra nisl, tempus lobortis sapien. Mauris tellus est, luctus sed porttitor eget, ornare ut libero. Etiam pretium, ipsum ac sollicitudin vulputate, turpis turpis tincidunt urna, at consequat eros nibh quis leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. " } { "title": "Napolitana", "ingredients": "Coulis de tomates, mozzarella, anchois, cépres, olives noires", "idCategory": 3, "category": { "link": "Pizzas", "isDeleted": false, "description": "Pizzas" }, "price": 14.5, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque blandit tellus, sed cursus felis ullamcorper fringilla. Nam consequat orci sit amet lacus viverra mollis. In hac habitasse platea dictumst. Mauris consectetur est maximus felis pulvinar malesuada. Cras congue, neque gravida iaculis interdum, tortor lacus ultricies ante, sit amet lacinia mauris ligula eu sem. Suspendisse finibus euismod arcu id interdum. Vestibulum quis eleifend purus, at gravida tortor. Vestibulum at lorem ut leo rutrum fermentum. Suspendisse eu viverra nisl, tempus lobortis sapien. Mauris tellus est, luctus sed porttitor eget, ornare ut libero. Etiam pretium, ipsum ac sollicitudin vulputate, turpis turpis tincidunt urna, at consequat eros nibh quis leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. " } { "title": "Romana", "ingredients": "Coulis de tomates, mozzarella, jambon, poivrons, oignons rouges", "idCategory": 3, "category": { "link": "Pizzas", "isDeleted": false, "description": "Pizzas" }, "price": 16.5, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque blandit tellus, sed cursus felis ullamcorper fringilla. Nam consequat orci sit amet lacus viverra mollis. In hac habitasse platea dictumst. Mauris consectetur est maximus felis pulvinar malesuada. Cras congue, neque gravida iaculis interdum, tortor lacus ultricies ante, sit amet lacinia mauris ligula eu sem. Suspendisse finibus euismod arcu id interdum. Vestibulum quis eleifend purus, at gravida tortor. Vestibulum at lorem ut leo rutrum fermentum. Suspendisse eu viverra nisl, tempus lobortis sapien. Mauris tellus est, luctus sed porttitor eget, ornare ut libero. Etiam pretium, ipsum ac sollicitudin vulputate, turpis turpis tincidunt urna, at consequat eros nibh quis leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. " } { "title": "Sole Mio", "ingredients": "Tomate, mozzarella, jambon, œuf frais", "idCategory": 3, "category": { "link": "Pizzas", "isDeleted": false, "description": "Pizzas" }, "price": 11.5, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque blandit tellus, sed cursus felis ullamcorper fringilla. Nam consequat orci sit amet lacus viverra mollis. In hac habitasse platea dictumst. Mauris consectetur est maximus felis pulvinar malesuada. Cras congue, neque gravida iaculis interdum, tortor lacus ultricies ante, sit amet lacinia mauris ligula eu sem. Suspendisse finibus euismod arcu id interdum. Vestibulum quis eleifend purus, at gravida tortor. Vestibulum at lorem ut leo rutrum fermentum. Suspendisse eu viverra nisl, tempus lobortis sapien. Mauris tellus est, luctus sed porttitor eget, ornare ut libero. Etiam pretium, ipsum ac sollicitudin vulputate, turpis turpis tincidunt urna, at consequat eros nibh quis leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. " } { "title": "Végétarienne", "ingredients": "Tomate, mozzarella,légumes", "idCategory": 3, "category": { "link": "Pizzas", "isDeleted": false, "description": "Pizzas" }, "price": 11.5, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque blandit tellus, sed cursus felis ullamcorper fringilla. Nam consequat orci sit amet lacus viverra mollis. In hac habitasse platea dictumst. Mauris consectetur est maximus felis pulvinar malesuada. Cras congue, neque gravida iaculis interdum, tortor lacus ultricies ante, sit amet lacinia mauris ligula eu sem. Suspendisse finibus euismod arcu id interdum. Vestibulum quis eleifend purus, at gravida tortor. Vestibulum at lorem ut leo rutrum fermentum. Suspendisse eu viverra nisl, tempus lobortis sapien. Mauris tellus est, luctus sed porttitor eget, ornare ut libero. Etiam pretium, ipsum ac sollicitudin vulputate, turpis turpis tincidunt urna, at consequat eros nibh quis leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. " } { "title": "Fruits de mer", "ingredients": "Tomate, mozzarella, fruits de mer, épices", "idCategory": 3, "category": { "link": "Pizzas", "isDeleted": false, "description": "Pizzas" }, "price": 14, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque blandit tellus, sed cursus felis ullamcorper fringilla. Nam consequat orci sit amet lacus viverra mollis. In hac habitasse platea dictumst. Mauris consectetur est maximus felis pulvinar malesuada. Cras congue, neque gravida iaculis interdum, tortor lacus ultricies ante, sit amet lacinia mauris ligula eu sem. Suspendisse finibus euismod arcu id interdum. Vestibulum quis eleifend purus, at gravida tortor. Vestibulum at lorem ut leo rutrum fermentum. Suspendisse eu viverra nisl, tempus lobortis sapien. Mauris tellus est, luctus sed porttitor eget, ornare ut libero. Etiam pretium, ipsum ac sollicitudin vulputate, turpis turpis tincidunt urna, at consequat eros nibh quis leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. " } { "title": "4 Formaggi", "ingredients": "Tomate, mozzarella, ricotta, gorgonzola, parmesan", "idCategory": 3, "category": { "link": "Pizzas", "isDeleted": false, "description": "Pizzas" }, "price": 14.75, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque blandit tellus, sed cursus felis ullamcorper fringilla. Nam consequat orci sit amet lacus viverra mollis. In hac habitasse platea dictumst. Mauris consectetur est maximus felis pulvinar malesuada. Cras congue, neque gravida iaculis interdum, tortor lacus ultricies ante, sit amet lacinia mauris ligula eu sem. Suspendisse finibus euismod arcu id interdum. Vestibulum quis eleifend purus, at gravida tortor. Vestibulum at lorem ut leo rutrum fermentum. Suspendisse eu viverra nisl, tempus lobortis sapien. Mauris tellus est, luctus sed porttitor eget, ornare ut libero. Etiam pretium, ipsum ac sollicitudin vulputate, turpis turpis tincidunt urna, at consequat eros nibh quis leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. " } { "title": "Il classico tiramisu", "ingredients": "Fait maison", "idCategory": 4, "category": { "link": "Desserts", "isDeleted": false, "description": "Desserts" }, "price": 5, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque blandit tellus, sed cursus felis ullamcorper fringilla. Nam consequat orci sit amet lacus viverra mollis. In hac habitasse platea dictumst. Mauris consectetur est maximus felis pulvinar malesuada. Cras congue, neque gravida iaculis interdum, tortor lacus ultricies ante, sit amet lacinia mauris ligula eu sem. Suspendisse finibus euismod arcu id interdum. Vestibulum quis eleifend purus, at gravida tortor. Vestibulum at lorem ut leo rutrum fermentum. Suspendisse eu viverra nisl, tempus lobortis sapien. Mauris tellus est, luctus sed porttitor eget, ornare ut libero. Etiam pretium, ipsum ac sollicitudin vulputate, turpis turpis tincidunt urna, at consequat eros nibh quis leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. " } { "title": "Tiramisu au speculoos ", "ingredients": "Fait maison", "idCategory": 4, "category": { "link": "Desserts", "isDeleted": false, "description": "Desserts" }, "price": 6.5, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque blandit tellus, sed cursus felis ullamcorper fringilla. Nam consequat orci sit amet lacus viverra mollis. In hac habitasse platea dictumst. Mauris consectetur est maximus felis pulvinar malesuada. Cras congue, neque gravida iaculis interdum, tortor lacus ultricies ante, sit amet lacinia mauris ligula eu sem. Suspendisse finibus euismod arcu id interdum. Vestibulum quis eleifend purus, at gravida tortor. Vestibulum at lorem ut leo rutrum fermentum. Suspendisse eu viverra nisl, tempus lobortis sapien. Mauris tellus est, luctus sed porttitor eget, ornare ut libero. Etiam pretium, ipsum ac sollicitudin vulputate, turpis turpis tincidunt urna, at consequat eros nibh quis leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. " } { "title": "Moelleux au chocolat", "ingredients": "Créme anglaise faite maison", "idCategory": 4, "category": { "link": "Desserts", "isDeleted": false, "description": "Desserts" }, "price": 5, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque blandit tellus, sed cursus felis ullamcorper fringilla. Nam consequat orci sit amet lacus viverra mollis. In hac habitasse platea dictumst. Mauris consectetur est maximus felis pulvinar malesuada. Cras congue, neque gravida iaculis interdum, tortor lacus ultricies ante, sit amet lacinia mauris ligula eu sem. Suspendisse finibus euismod arcu id interdum. Vestibulum quis eleifend purus, at gravida tortor. Vestibulum at lorem ut leo rutrum fermentum. Suspendisse eu viverra nisl, tempus lobortis sapien. Mauris tellus est, luctus sed porttitor eget, ornare ut libero. Etiam pretium, ipsum ac sollicitudin vulputate, turpis turpis tincidunt urna, at consequat eros nibh quis leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. " } { "title": "Moelleux au chocolat", "ingredients": "Créme anglaise faite maison", "idCategory": 4, "category": { "link": "Desserts", "isDeleted": false, "description": "Desserts" }, "price": 5, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque blandit tellus, sed cursus felis ullamcorper fringilla. Nam consequat orci sit amet lacus viverra mollis. In hac habitasse platea dictumst. Mauris consectetur est maximus felis pulvinar malesuada. Cras congue, neque gravida iaculis interdum, tortor lacus ultricies ante, sit amet lacinia mauris ligula eu sem. Suspendisse finibus euismod arcu id interdum. Vestibulum quis eleifend purus, at gravida tortor. Vestibulum at lorem ut leo rutrum fermentum. Suspendisse eu viverra nisl, tempus lobortis sapien. Mauris tellus est, luctus sed porttitor eget, ornare ut libero. Etiam pretium, ipsum ac sollicitudin vulputate, turpis turpis tincidunt urna, at consequat eros nibh quis leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. " } { "title": "Sabayon au marsala", "ingredients": "Fait maison", "idCategory": 4, "category": { "link": "Desserts", "isDeleted": false, "description": "Desserts" }, "price": 7, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque blandit tellus, sed cursus felis ullamcorper fringilla. Nam consequat orci sit amet lacus viverra mollis. In hac habitasse platea dictumst. Mauris consectetur est maximus felis pulvinar malesuada. Cras congue, neque gravida iaculis interdum, tortor lacus ultricies ante, sit amet lacinia mauris ligula eu sem. Suspendisse finibus euismod arcu id interdum. Vestibulum quis eleifend purus, at gravida tortor. Vestibulum at lorem ut leo rutrum fermentum. Suspendisse eu viverra nisl, tempus lobortis sapien. Mauris tellus est, luctus sed porttitor eget, ornare ut libero. Etiam pretium, ipsum ac sollicitudin vulputate, turpis turpis tincidunt urna, at consequat eros nibh quis leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. " } { "title": "Dame Blanche ", "ingredients": "", "idCategory": 4, "category": { "link": "Desserts", "isDeleted": false, "description": "Desserts" }, "price": 8.5, "isDeleted": false, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque blandit tellus, sed cursus felis ullamcorper fringilla. Nam consequat orci sit amet lacus viverra mollis. In hac habitasse platea dictumst. Mauris consectetur est maximus felis pulvinar malesuada. Cras congue, neque gravida iaculis interdum, tortor lacus ultricies ante, sit amet lacinia mauris ligula eu sem. Suspendisse finibus euismod arcu id interdum. Vestibulum quis eleifend purus, at gravida tortor. Vestibulum at lorem ut leo rutrum fermentum. Suspendisse eu viverra nisl, tempus lobortis sapien. Mauris tellus est, luctus sed porttitor eget, ornare ut libero. Etiam pretium, ipsum ac sollicitudin vulputate, turpis turpis tincidunt urna, at consequat eros nibh quis leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. " } { "title": "San Pellegrino", "ingredients": "50 cl", "idCategory": 5, "category": { "link": "Boissons", "isDeleted": false, "description": "Boissons" }, "price": 4.9, "isDeleted": false, "description": "" } { "title": "Panna ", "ingredients": "50 cl", "idCategory": 5, "category": { "link": "Boissons", "isDeleted": false, "description": "Boissons" }, "price": 4.9, "isDeleted": false, "description": "" } { "title": "Montepulciano - Abruzzes", "ingredients": "Vins rouge au verre", "idCategory": 5, "category": { "link": "Boissons", "isDeleted": false, "description": "Boissons" }, "price": 5, "isDeleted": false, "description": "" } { "title": "Piedirosso - Campagna Naples", "ingredients": "Vins rouge au verre", "idCategory": 5, "category": { "link": "Boissons", "isDeleted": false, "description": "Boissons" }, "price": 6, "isDeleted": false, "description": "" } { "title": "Pecorino - Abruzzes", "ingredients": "Vin blanc au verre", "idCategory": 5, "category": { "link": "Boissons", "isDeleted": false, "description": "Boissons" }, "price": 4, "isDeleted": false, "description": "" } { "title": "Rebola - Emilia Romagna", "ingredients": "Vin blanc au verre", "idCategory": 5, "category": { "link": "Boissons", "isDeleted": false, "description": "Boissons" }, "price": 6, "isDeleted": false, "description": "" } { "title": "Cerasuolo Montepulciano - Abruzzes ", "ingredients": "Vin rosé au verre", "idCategory": 5, "category": { "link": "Boissons", "isDeleted": false, "description": "Boissons" }, "price": 4, "isDeleted": false, "description": "" }

[dukoid]

essaye d'y aller petit à petit:

Code html :

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

1
2
3
<ng-container *ngFor='let m of menu;'>
{{m.category.description}}
</ng-container>

Code html :

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

1
2
3
4
<ng-container *ngFor='let m of menu;'>
{{m.category.description}}
<app-menu-view [previousCategory]="m.category.description"></app-menu-view>  
</ng-container>

le code de app-menu-view ?


après si tu peux mettre ton projet sur stackblitz, ça sera plus facile nous nous à débuguer

[paintbox]

Bonjour désolé pur la réponse tardive,

j'ai essayé de trouver pourquoi cela boucle mais sans succès.

Concernant stackblitz, y-a-t-il moyen de charger directement mon projet? Je n'ai pas trouvé comment.
Merci

[dukoid]

tu copie / colle tes dossiers/ fichiers
c'est assez rapide

ensuite faut me fournir le lien public afin que puisse lancer dans stackblitz

[paintbox]

Je viens de mettre en ligne une partie du code. Tu ne seras pas l'exécuter parce que tout n'y est pas et que l'application consomme une Api Asp.Net Core que j'ai en local.
Voici le lien:
https://angular-ivy-wj1ep7.stackblitz.io

En espérant que ce soit suffisant.
Merci

[dukoid]

ce n'est pas le bon lien tu m'a donné le lien d'exécution
faut me donner le lien d'Edition

[paintbox]

Voici : https://stackblitz.com/edit/angular-.../app.module.ts

[krakatoa]

on a accès à l'éditeur mais il n'y a pas grand chose.

verifie que tu as ajouté le code concerné (.ts et html)

[dukoid]

il y a quelque chose que je ne comprends pas



app.component.html ou un composant parent ? C'est bien ça ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<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>

et ce code là ?

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
19
 
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);
  }
}

parceque ce code qui fournit les données de la variable : menu doit aussi appartenir au composant parent
mais c'est écrit : MenuViewComponent


donc peut être tu mélanges parent / enfant

met bien le code dans stackbliz qu'on regarde

[paintbox]

Visiblement tous n'a pas été enregistré. Je viens de mettre à jour les fichiers utiles.

[dukoid]

menu-view.component.html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

menu-view.component.ts

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
import { Component, Input, OnInit } from "@angular/core";
import { MenuService } from "./../services/menu.service";
import { IMenu } from "./../entities/imenu";

@Component({
  selector: "app-menu-view",
  templateUrl: "./menu-view.component.html",
  styleUrls: ["./menu-view.component.css"]
})
export class MenuViewComponent implements OnInit {
...
...

tu ne peux pas utiliser le composant dans lui meme ! regarde : <app-menu-view [previousCategory]="m.category.description"></app-menu-view>




tu peux l'utiliser dans un autre composant comme par exemple:
app.component.html

Code :

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

1
2
 
      <app-menu-view [previousCategory]="m.category.description"></app-menu-view>

[paintbox]

Hello,

j'ai apporté quelques modifications en créant la fonction "setPreviousCategory"qui affecte une valeur à la variable "previousCategory". Elle est bien affecté et les catégories n'apparaissent plus qu'une seule fois.
Par contre les autres plats d'une même catégorie n'apparaissent pas parce que lorsque je passe dans "checkCategory" retourne false parce que la variable "previousCategory" à le nom de la nouvelle catégorie et n'a pas conservé le nom de la précédente.
Une idée?