相关疑难解决方法(0)

Angular 2下拉选项默认值

在Angular 1中,我可以使用以下选项为下拉框选择默认选项:

<select 
    data-ng-model="carSelection"
    data-ng-options = "x.make for x in cars" data-ng-selected="$first">
</select>
Run Code Online (Sandbox Code Playgroud)

在Angular 2中我有:

<select class="form-control" [(ngModel)]="selectedWorkout" (ngModelChange)="updateWorkout($event)">
    <option *ngFor="#workout of workouts">{{workout.name}}</option>
</select>
Run Code Online (Sandbox Code Playgroud)

如果我的选项数据是:我如何选择默认选项:

[{name: 'arm'}, {name: 'back'}, {name:'leg'}]而我默认的价值是back

angular

111
推荐指数
7
解决办法
23万
查看次数

如何在Angular 2中的选择控件中显示占位符(空选项)?

我在我的模板中有这个代码:

<select [ngModel]="selectedSubSectionId" (ngModelChange)="onSubSectionChange($event)">
  <option *ngFor="let subSection of event.subSections" [ngValue]="subSection.id">{{ subSection.name }}</option>
</select>
Run Code Online (Sandbox Code Playgroud)

在我的组件中:

public selectedSubSectionId: any;

public onSubSectionChange(subSectionId: any) {
  // some code I execute after ngModel changes.
}
Run Code Online (Sandbox Code Playgroud)

这样可以,但最初我有一个空盒子.我想在那里显示占位符消息.如何使用ngModel执行此操作?

angular2-ngmodel angular

22
推荐指数
4
解决办法
3万
查看次数

在反应形式的选择选项中有默认值

根据我之前已经选择的内容,我如何获得默认值。就像我编辑一些东西并且它有一个下拉菜单一样,我可以看到我之前提交的默认值,所以它不会混淆用户。例如,在我的代码中,如果我单击编辑按钮,它会将我重定向到页面并启动下面的“patchValues()”函数,它可以从供应商列表中进行选择。我想要的是,如果我点击编辑按钮,我可以在选择选项中看到一个默认值

TS

patchValues() {
    let suppliers = this.myForm.get('suppliers') as FormArray;
    this.material.suppliers.forEach(supplier => {
      suppliers.push(this.fb.group({
       supplier_id: supplier.name,
     }))
    })
  }
Run Code Online (Sandbox Code Playgroud)

HTML

<tr *ngFor="let row of myForm.controls.suppliers.controls; let i = index" [formGroupName]="i">
            <td>
              <select formControlName="supplier_id" class="col-md-12" >
                <option *ngFor="let supplier of suppliers"  [value]="supplier.id">
                  {{supplier.name}}
                </option>
              </select>
            </td>
   </tr>
Run Code Online (Sandbox Code Playgroud)

angular angular-reactive-forms angular4-forms

4
推荐指数
1
解决办法
7496
查看次数