代码之家 › 专栏 › 技术社区 › billy_56

引导选择列表为空-角度

drop-down-menu twitter-bootstrap-3 angular

billy_56 · 技术社区 · 6 年前

我正在尝试用数据库中的项目填充引导列表,下面是我所做的:

这是我的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);
        });
  }

毕竟我的选择列表是空的,如下所示:

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

请注意,因为这是我的第一个angular应用程序,所以在我将其与ngModel绑定之前,可以在构造函数中实例化模型对象,还是应该在其他地方进行实例化? 或者,我不应该直接在ngModel中使用模型属性,这意味着我应该创建一个本地变量,该变量应该被绑定,在保存时,我将创建新对象并用这些变量值填充它的属性?

谢谢

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

2 回复 | 直到 6 年前

David 6 年前

你不能有 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

这个 异步 可以使用管道,这样您就不必手动管理子描述。大多数属性期望使用实际值,而不是可观察值

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

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

Anuradha Gunasekara 6 年前

我想你失踪了 <option> 标签位于 <select> 标签如果需要填充下拉菜单,请执行以下操作。

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