Stocker une valeur dans le component html

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

Code:

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

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:

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

montre le code

Merci aussi pour ton aide dukoid,

voici le code

Code:

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:

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

essaye ça :

Code:

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>

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

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

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

Hello Dukoid,

cela me retourne bien les données.

Code:

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": "" }

essaye d'y aller petit à petit:
Code:

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

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

stackblitz

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

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

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

stackblitz

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

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

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

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)

il y a quelque chose que je ne comprends pas

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

Code:

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:

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

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

menu-view.component.html

Code:

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:

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:

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

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?

faut creer un autre composant

au lieu de :

Code:

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

tu creais

Code:

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

mais il est censé faire quoi ce composant ?

Résolu

Bonjour, j'ai finalement résolu mon problème.
Voici le code final de la vue. Il y avait également des erreurs de nom de champs dans ma class. Ils n'étaient pas orthographié comme dans la Web Api.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<section id="carte">
  <h2>NOTRE CARTE</h2>
  <article id="banner">
    <img src="assets/Ressources/Images/banner_plats.jpg" alt="Plats">
  </article>
 
  <ng-container *ngFor='let m of menu;'>
    <ng-container *ngIf="checkCategory(m.category.description)">
      <article id="item.Category.Description.ToString().Trim()">
        <h2>{{m.category.description |uppercase}}</h2>
      </article>
    </ng-container>
    <ul class="plats">
      <li>
        {{m.title | uppercase}}
        <span class="price">{{m.price | number:'1.2-2'}} &euro;</span>
        <span class="ingredients">{{m.ingredients}}</span>
      </li>
    </ul>
    <ng-container *ngIf="setPreviousCategory(m.category.description)"></ng-container>
  </ng-container>
</section>

Merci pour votre aide.