Question

我试图用数据库中的项目填充我的Bootstrap列表，这就是我已经完成的工作：

这是我的HTML：

还有[（ngModel）] =＆＃34; mainGroups＆＃34;

<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);
        });
  }

毕竟我的选择列表是空的，看起来像这样：

任何形式的帮助和建议都会很棒！

请注意，因为这是我的第一个有角度的应用程序，在使用ngModel绑定它之前，是否可以在构造函数中实例化模型对象，或者它应该在其他地方完成？或者也许我不应该直接在ngModel中使用模型属性，这意味着我应该创建一个应该绑定的局部变量，在保存时我会创建新对象并用这些变量值填充它的属性？

由于

在大卫的帮助下编辑，可能的解决方案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);
  }

Answer 1

您不能将mainGroups: Group[]; this._groupService.getAll().subscribe( groups => this.mainGroups = groups);绑定到ab observable。

您需要订阅

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>管道

修改

async

修改2

可以使用tableView.reloadData { // Slightly scroll up, moving the navigation bar back to place self.tableView.setContentOffset(CGPoint(x: 0, y: -0.3), animated: false) }管道，这样您就不必手动管理子目录。大多数属性都期望使用实际值，而不是可观察的

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

双向绑定需要在选定的值上，而不是列表本身

Answer 2

我认为您在<option>标记内缺少<select>标记。如果您需要填充下拉菜单，请执行以下操作。

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

Bootstrap选择列表为空 - Angular

2 个答案: