Why NG-REPEAT doesn't work with json variable from service?

Question

I have a JSON variable in my StudentService.ts and I want to populate my select options from these JSON.

My service:

  careers : {};
  constructor(private http: HttpClient) { 
    this.selectedStudent = new Student();
    this.careers = [
      {"id":"itic", "name":"Sistemas"},
      {"id":"itic", "name":"Sistemas"},
      {"id":"itic", "name":"Sistemas"},
    ];
  }

My template.html

<p>{{ studentService.careers | json }}</p>
<div class="input-field col s12">
  <select>
    <option ng-repeat="career in studentService.careers">{{career.name}}</option>
  </select>
    <label>Materialize Select</label>
</div>

The first line in template.html works, and shows my JSON, but I can't replicate that in my select.

Possible duplicate of [Ng-repeat-start in angular2 - aka repeat multiple elements using NgFor](https://stackoverflow.com/questions/34533200/ng-repeat-start-in-angular2-aka-repeat-multiple-elements-using-ngfor) — Lazar Ljubenović, Aug 11 '18 at 08:21

score 3 · Accepted Answer · edited Aug 11 '18 at 08:20

3

Angular does not have ng-repeat , the corresponding syntax is ngFor, you need to change it using ngFor,

<select>
    <option *ngFor="let career of studentService.careers">{{career.name}}</option>
</select>

edited Aug 11 '18 at 08:20

Lazar Ljubenović

18,976
10
56
91

answered Aug 11 '18 at 05:03

Sajeetharan

216,225
63
350
396

Before put question, I tried that method but it not worked. After all night, I realize it was a Materialize CSS framework error, apparently "M.AutoInit();" does not autoInit all elements, Select Forms one of them. Thank you! – MoisesH18 Aug 11 '18 at 16:18

Why NG-REPEAT doesn't work with json variable from service?

1 Answers1