angular 2 无法动态创建 selectpicker(bootstrap)答案

【问题标题】：angular 2 can't create selectpicker(bootstrap) dynamicallyangular 2 无法动态创建 selectpicker(bootstrap)
【发布时间】：2016-07-13 04:23:59
【问题描述】：

我正在尝试动态创建教育形式。即当用户单击“添加教育”按钮时，它将创建一个教育形式供用户填写信息。我使用引导程序中的 selectpicker 供用户选择年份和月份。但是，angular2 在加载教育表单时无法创建选择器。如果我静态创建 selectpicker，它将起作用，但不适用于动态。真的很想知道是什么问题。以下是相关文件中的部分代码：

申请页面.html

<div class="row education">
    <div class="col-md-1 col-xs-12 page-label">
        Education
    </div>
    <div class="col-md-10 col-xs-12 page-label-link">
        <ul class="ul-no-margin">
          <li *ngFor="let education of educations; let i = index">
            <education-form [index]="i" [education]="education" (deleteEvent)="deleteEducation($event)"></education-form>
          </li>
        </ul>
        <a (click)="addEducation()">Add education</a>
    </div>
</div>

教育.html

<select class="inline-box selectpicker" data-style="btn-secondary" data-width="auto" tabindex="-1" id="" required="">
    <option value="0">Month *</option>
    <option value="1">Jan</option>
    <option value="2">Feb</option>
    <option value="3">Mar</option>
    <option value="4">Apr</option>
    <option value="5">May</option>                
    <option value="6">Jun</option>
    <option value="7">Jul</option>
    <option value="8">Aug</option>
    <option value="9">Sep</option>
    <option value="10">Oct</option>
    <option value="11">Nov</option>
    <option value="12">Dec</option>
</select>

新教育显示在申请页面中：

<li *ngFor="let education of educations; let i = index"
    <education-form [index]="i" [education]="education" (deleteEvent)="deleteEducation($event)"></education-form>
</li>

如果我删除类属性中的“selectpicker”，那么选择标签可以正常工作，但它不能从引导程序中显示漂亮的布局。如果我在类属性中添加“selectpicker”，则选择标签不起作用。它不会在屏幕上显示任何内容。

希望有人可以帮助我解决问题。谢谢。

【问题讨论】：

你在使用ngIf吗？
不，每次当用户点击“添加教育”按钮，角度添加新元素到教育，然后
将显示新的教育。

【解决方案1】：

我发现我的education.ts 文件中没有包含jQuery 模块。以下是正确的代码。

education.ts：

import {Component, ViewEncapsulation, Input, Output, EventEmitter} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
// import education class
import {Education} from '../model/education';

declare var jQuery: any;

@Component({
  selector: 'education-form',
  template: require('./education-form.html'),
  host: {
    class: 'education-form'
  },
  encapsulation: ViewEncapsulation.None,
})
export class EducationForm{
    // the vars to store data from parent page
    @Input() index: number;
    @Input() education: Education;

    // the var to invoke an event of parent page
    @Output() deleteEvent = new EventEmitter<number>();


    ngOnInit(): void {
        jQuery('.selectpicker').selectpicker();
    }

    // the function to delete form of education
    deleteEducation(){
        this.deleteEvent.emit(this.index);
    }

}

我加了

declare var jQuery: any;

和

ngOnInit(): void {
        jQuery('.selectpicker').selectpicker();
    }

然后就可以了。请记住在 AngularJS 中包含使用的模块。

【讨论】：