Список выбора bootstrap пуст - angular

Я пытаюсь заполнить свой список Bootstrap элементами из базы данных, и вот что я уже сделал:

Вот мой HTML:

Также есть [(ngModel)] = "mainGroups"

<div class="form-group">
    <label class="control-label dash-control-label col-xs-3">Group category:</label>
      <div class="col-xs-9">
       <select class="form-control dash-form-control select2" style="width: 100%;"
          data-minimum-results-for-search="Infinity" name="articleGroups" [(ngModel)]="mainGroups">

        </select>
      </div>
</div>

Вот содержимое моего файла ts:

@Component({
  selector: 'product-new',
  templateUrl: './product-new.component.html',
  styleUrls: ['./product-new.component.css']
})
export class ArticleNewComponent implements OnInit {

  id: string;
  article: Article;
  // Here I'm creating array that will hold all my categories / groups
  mainGroups: Observable<Group[]>;

  constructor(private _groupService: GroupService) {

    this.article = new Article();
    this.article.isActive = true;
    // Here I'm getting all groups and definately they are not empty
    this.mainGroups = this._groupService.getAll();
  }
}

Вот мой файл categories.service.ts, который предоставляет мне метод getAll:

  getAll(): Observable<Group[]> {
    return this._http.get<Group[]>(url)
      .catch(
        (error: HttpErrorResponse) => {
          return Observable.throw(error);
        });
  }

И в конце концов мой список выбора пуст и выглядит так:

enter image description here

Любая помощь и предложения были бы потрясающими!

И обратите внимание, поскольку это мое первое приложение angular, можно ли создать экземпляр объекта модели в конструкторе, прежде чем я привяжу его к ngModel, или это нужно сделать где-то еще? Или, может быть, мне не следует напрямую использовать свойства модели в ngModel, это означает, что я должен создать локальные переменные, которые должны быть привязаны, и при сохранении я бы создал новый объект и заполнил его свойства значениями этих переменных?

Спасибо

EDIT after David's help, possible solution 2:

 <div class="form-group">
                  <label class="control-label dash-control-label col-xs-3">Grupa:</label>
                  <div class="col-xs-9">
                    <select class="form-control dash-form-control select2" style="width: 100%;"
                            data-minimum-results-for-search="Infinity" name="articleGroups" [(ngModel)]="selectedGroup">
                      <option [ngValue]="group" *ngFor="let group of mainGroups">{{group.title}}</option>
                    </select>
     </div>
  </div>


  mainGroups: Group[];

  constructor(private _globalHelperService: GlobalHelperService, private _groupService: GroupService) {

    this._groupService.getAll().subscribe(groups => this.mainGroups = groups);
  }
0
0
200
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

Вам нужно подписаться

mainGroups: Group[];
this._groupService.getAll().subscribe( groups =>  this.mainGroups = groups);

Или используйте трубу async

Редактировать

mainGroups: Observable<Group[]>;
selectedGroup: Group;


<select class="form-control dash-form-control select2" style="width: 100%;"
      data-minimum-results-for-search="Infinity" name="articleGroups" 
[(ngModel)]="selectedGroup">
     <option [ngValue]="group" *ngFor="let group of mainGroups | async">{{group.name}}</option>
    </select>

Редактировать 2

Канал async можно использовать, так что вам не нужно вручную управлять подписками. Большинство свойств ожидают, что будет работать реальное значение, а не наблюдаемое

https://angular.io/api/common/AsyncPipe

Двухсторонняя привязка должна быть для выбранного значения, а не для самого списка

все еще пусто, может мне стоит сделать что-то внутри тега <select>? вручную добавить параметры для каждого элемента?

billy_56 11.04.2018 14:00

Да, это тоже на самом деле

David 11.04.2018 14:04

не могли бы вы объяснить свой код, он работает так, как ожидалось, но я этого не понимаю, почему вы не используете двусторонние привязки списков mainGroups, я немного запутался :(

billy_56 11.04.2018 15:17

и я понял, что вы реализовали async, и я не знаю, почему?

billy_56 11.04.2018 15:17

проверьте мой вопрос о редактировании, я добавил возможное решение, поэтому мне интересно, все ли в порядке?

billy_56 11.04.2018 15:43

Я думаю, вам не хватает тега <option> внутри тега <select>. Если вам нужно заполнить раскрывающееся меню, сделайте что-то вроде этого.

<select [ngModel]="selectedGroup" (ngModelChange)="onChange($event)" name="sel2">
    <option [value]="i" *ngFor="let group of mainGroups">{{group}}</option>
</select>

Другие вопросы по теме