Twitter Bootstrap Question posted in

please make the code ngFor work for angular2-Twitter bootstrap

i have an ngFor ,a for loop written for Grocery items.I have got this code snippent from a website explaining ngFor over ngRepeat. I just copy pasted it . But it doesn’t seem to work. It uses an interface, a @Component and an export default class. Can you also please explain that.Please help.

<html>
<head>
    <title>ngFor</title>
    <script src="angular.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter- 
  bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  <script 
  src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js">
  </script>
    <script 
   src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
   </script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>

 </head>
 <body>

        import {Component} from '@angular/core';

        interface Grocery {
          id: number;
          label: string;
        }

        @Component({
          selector: 'my-app',
          template: `
            <div>
              Grocery selected: {{ selectedGrocery.label }}
              <ul>
                <li *ngFor="let grocery of groceries; let i = index; trackBy: trackByGrocery;">
                  <a href="#" (click)="selectGrocery(grocery);">
                    {{ grocery.label }} {{ i }}
                  </a>
                </li>
              </ul>
            </div>
          `
        })
        export default class App {
          public groceries: Grocery[];
          constructor() {
            this.groceries = [{
              id: 0, label: 'Butter'
            },{
              id: 1, label: 'Apples'
            },{
              id: 2, label: 'Paprika'
            },{
              id: 3, label: 'Potatoes'
            },{
              id: 4, label: 'Oatmeal'
            },{
              id: 5, label: 'Spaghetti'
            },{
              id: 6, label: 'Pears'
            },{
              id: 7, label: 'Bacon'
            }];
            this.selectGrocery(this.groceries[0]);
          }
          selectGrocery(grocery: Grocery) {
            this.selectedGrocery = grocery;
          }
          trackByGrocery: (index: number, grocery: Grocery): number => 
    grocery.id;
        }

   </body>
  </html>
Tags:

2

Answers


  1. 0

    You can take a look at the official Angular 2 documentation. Here is how it is recommended to use ngFor in html component or template [1] :

    <ul>
<li *ngFor="let hero of heroes">
  {{ hero }}
</li>

    [1] https://angular.io/guide/displaying-data

    Login or Signup to reply.
  2. 0

    You should have a look at the angular official documentation.
    Take a look at this stackBlitz

    There are a few things to note in the question. Change the trackByGrocery to be a function

    trackByGrocery = (index, grocery) => grocery.id;

    and declare the selectedGrocery before using it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search