Search code examples
angularangular6angularjs-ng-repeatngfor

unable to bind static json data to list in angular 6

Am new in Angular framework. Now I create an angular web app using angular@cli.

Following are the versions I used:

Angular CLI: 6.1.3 Node: 10.15.3 OS: win32 x64 Angular: 6.1.2

Currently I am trying to bind a JSON data into list in HTML file. But it wont work,checked lot of examples, still its not working its showing an error:

"Cannot read property 'name' of undefined". I don't know why it's undefined.

enter image description here

HTML code:

<div>
  <ul class="list-group list-group-flush" ng-repeat="list in SERVICE_LIST">
    <li class="list-group-item">
      <a href="">{{list.name}}</a>
      <span class="active-circle">&nbsp;</span>
    </li>
  </ul>
</div>

Component Code:

@Component({
  selector: 'app-main-home',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
  constructor() { }
  SERVICE_LIST = [
    {"id":1, "name": "Service 1", "port": "8090", "ip": "10.0..4", "status": "InActive" },
    { "id":2,"name": "Service 2", "port": "8090", "ip": "10.0..4", "status": "InActive" },
    {"id":3, "name": "Service 3", "port": "8090", "ip": "10.0..4", "status": "InActive" }
  ]
  ngOnInit() {
  }
}

I spent a lot of time and tried to figure out what I am doing wrong and no idea.

I tried to add ng-repeat inside div,ul and li tags and other solutions from stack but getting the same error. If am trying to display a single variable value inside the HTML file its work fine. What was the hidden issue in this code?

Solution

  • You should use ngFor with Angular 6, not ng-repeat:

    <ul class="list-group list-group-flush" *ngFor="let list of SERVICE_LIST">
  <li class="list-group-item">
    <a href="">{{list?.name}}</a>
    <span class="active-circle">&nbsp;</span>
  </li>
</ul>

    Ecample: Stackblitz Demo