// HTML页面
<table class='mytable'>
    <tbody>
        <ng-container *ngFor='let data of this.Array; let i = index'>
            <tr>
                <td style='width:180px;'>
                    <select 
                        // class中添加selectpicker即应用bootstrap-select组件
                        class="selectpicker show-tick form-control model-list"
                        formControlName="model"
                        // id循环赋值
                        id="model{{i}}"
                        // 热搜索/热加载:下拉框搜索
                        data-live-search="true"
                        // 默认显示 请选择
                        title="请选择"
                        // change事件
                        (change)="modelChange($event)">
                    </select>
                </td>
            </tr>
        </ng-container>
    </tbody>
</table>

// select.component.ts页面
this.Array.map((list,i)=>{
    // 接口
    this.myService.getData(list.type).subscribe(data=>{
        data.forEach((val,index)=>{
            // 添加一个空选项
            if(index==0){
                $('#model'+ i).append('<option value=""></option>')
            }
            // 根据id添加子元素
            $('#model'+ i).append('<option value="'+ val.id +'">'+ val.name +'</option>')
        })
        // 强制刷新(必须刷新,否则数据无法显示)
        jquery.$('#model'+i).selectpicker('refresh'); 
        // 强制重新渲染
        jquery.$('#model'+i).selectpicker('render'); 
        // 默认选中
        jquery.$('#model'+i).selectpicker('val',list.model);
    })
})
.mytable>tbody>tr>td{
    // 避免bootstrap-select下拉框被td遮挡
    overflow: unset;
}

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐