список опций не работает с Observables

Question

У меня есть список опций категории, чтобы выбрать категорию книги. когда я пытаюсь с помощью observable, список опций становится пустым, но если я пытаюсь с массивом, он работает без проблем. Почему это происходит. Если наблюдаемое не подходит для списка опций.

приведенный ниже код не работает так, как мы ожидали!

 category$: Observable<categoryModel[]>;


<div class="form-group">
    <label for="option-role">Category:</label>
    <select class="form-control form-control-sm" id="options" formControlName="category" required
      [ngClass]="{'is-invalid':submitted && f.category.errors}">
      <option value="" disabled>select</option>
      <option *ngFor="let category of category$ | async" [ngValue]="category ">{{category ?.name}}</option>
    </select>
    <div *ngIf="submitted && f.category.errors" class="invalid-feedback">
      <div *ngIf="f.category.errors.required">Please select atleast one Category</div>    
    </div>
  </div>

, но если я попробую тот же код с простым массивом категории, он будет работать без проблем. Приведенный ниже код работает без проблем

category$:Observable<categoryModel[]>;
this.category$.subscribe(category=>{
this.categoryArray=category;});


<div class="form-group">
    <label for="option-role">Category:</label>
    <select class="form-control form-control-sm" id="options" formControlName="category" required
      [ngClass]="{'is-invalid':submitted && f.category.errors}">
      <option value="" disabled>select</option>
      <option *ngFor="let category of categoryArray" [ngValue]="category ">{{category ?.name}}</option>
    </select>
    <div *ngIf="submitted && f.category.errors" class="invalid-feedback">
      <div *ngIf="f.category.errors.required">Please select atleast one Category</div>    
    </div>
  </div>