Populate select options from Parse API with Angular

Question

I have a ParseServer instance where i hold a list of categories and i receive them through a service.

Those categories should be shown in a HTML form as <select>-options. But the categories are fetched too late, the select dropdown already has been rendered, and my database entries are not shown there.

When i put the output {{categories}} somewhere in the html code, i can see a object array of the correct length. And even, when i name my options "<option ...>c:{{i}} {{categories.length}}</option> the correct length is displayed.

The html

<select class="form-control" name="category" formControlName="category">
      <option value="">-</option>
      <option ngfor="let cat of (categories | async); let i = index" [ngValue]="cat">c:{{i}}&lt;/option>
     </select>

The component

export class CreateComponent implements OnInit {
  categories: any[];
  ...
  constructor(private logService:LogService, private fb: FormBuilder, private parseManager: ParseManager, private categoriesService: CategoriesService) {
  ...
  } 
  ngOnInit() {

    this.parseManager.categoriesGet((cats) => {
        this.categories = cats;
      }
    );
  }

  ...
}

The service

var Parse = require('parse').Parse;
Parse.initialize("blabla123123123");

Parse.serverURL = "http://localhost:1337/parse";

export class ParseManager {

  constructor() {

  }

categoriesGet(success: (categories)=>void){
    var query = new Parse.Query("Category");
    query.find({
      success: function(categories) {
        console.log("Getting categories finished: ");
        console.log(categories);
        success(categories);
      }
    })
  }

Answer 1

Shame on me, I found the problem, WebStorm's autocomplete renamed my *ngFor to ngFor. Now I changed it back to *ngFor and it works.