我在下拉列表中顯示了一個列表，但它將默認(rèn)顯示為空白，而不是下拉列表中的第一項。我嘗試添加let i = 0然后[selected]="i = 0"，但這似乎沒有將默認(rèn)項目設(shè)置為第一項，但是我從 收到了正確的值i。下面是我的代碼：<div class="form-group"> <label for="userName">User Name</label> <select formControlName="userName" class="form-control" (change)="userChange($event)"> <option *ngFor="let row of usersModel;let i = index" value="{{ row.id }}" [selected]="i == 0">{{ row.userName }} {{ i }}</option> </select></div>這是我的 TypeScript 文件： import { Component, OnInit } from '@angular/core';import { UserAdminService } from '../../services/user-admin.service';import { FormBuilder, Form, FormControl, FormGroup } from '@angular/forms';import { Router } from '@angular/router';@Component({ selector: 'lib-add-user-to-role', templateUrl: './add-user-to-role.component.html', styleUrls: ['./add-user-to-role.component.css']})export class AddUserToRoleComponent implements OnInit { addUserToRoleForm: FormGroup; rolesModel: any[]; usersModel: any[]; selectedRole: string; selectedUser: string; constructor(private userAdminService: UserAdminService, private formBuilder: FormBuilder, private router: Router) { var roleControl = new FormControl(''); var userControl = new FormControl(''); this.addUserToRoleForm = formBuilder.group({ roleName: roleControl, userName: userControl }); } ngOnInit() {this.userAdminService.getRoles().subscribe(roles => { this.rolesModel = roles; this.selectedRole = this.rolesModel[0].name; this.userAdminService.getUsersNotInRole(this.selectedRole).subscribe(users => { this.usersModel = users; this.selectedUser = this.usersModel[0].id; console.log(this.usersModel[0].userName); this.addUserToRoleForm.controls['roleName'].setValue(this.rolesModel[0].name); this.addUserToRoleForm.controls['userName'].setValue(this.usersModel[0].userName); });}); } userChange(event: any) { this.selectedUser = event.target.value; console.log('Selected ' + this.selectedUser); }
2 回答
蠱毒傳說
TA貢獻(xiàn)1895條經(jīng)驗 獲得超3個贊
如果您使用的是響應(yīng)式表單，則無需使用[selected]Nor (change)，只需在創(chuàng)建表單時為 userName 賦予值即可
使用構(gòu)造函數(shù)
const firstId=usersModel[0].id
this.form=new FormGroup({
userName:new FormControl(firstId)
})
使用表單生成器
const firstId=usersModel[0].id
this.form=this.fb.group({
userName:firstId
})
創(chuàng)建表單后使用 setValue
const firstId=usersModel[0].id
this.form.get('userName').setValue(firstId)
明月笑刀無情
TA貢獻(xiàn)1828條經(jīng)驗 獲得超4個贊
當(dāng)您使用 Angular 反應(yīng)形式時，請嘗試將邏輯保留在ts文件本身中。
使用setValue()，您可以為控件設(shè)置默認(rèn)值。
要設(shè)置表單控件的默認(rèn)值，您可以這樣，
this.form.controls['country'].setValue(this.countries[0].id)
在模板中使用它，
<option?*ngFor="let?country?of?countries"?[value]="country.id">
????{{?country.name?}}
????</option>參考：
完整的示例代碼類似于，
應(yīng)用程序組件.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import {Country} from './country';
@Component({
? selector: 'my-app',
? templateUrl: './app.component.html',
? styleUrls: [ './app.component.css' ]
})
export class AppComponent? {
? countries = [
? ? {
? ? ? id: 'us',
? ? ? name: 'United States'
? ? },
? ? {
? ? ? id: 'uk',
? ? ? name: 'United Kingdom'
? ? },
? ? {
? ? ? id: 'ca',
? ? ? name: 'Canada'
? ? }
? ];
? form: FormGroup;
? ngOnInit(){
? ? ? this.form = new FormGroup({
? ? ? ? country: new FormControl('')
? ? ?});
? ? ?this.form.controls['country'].setValue(this.countries[0].id)
? }
}
應(yīng)用程序組件.html
<form [formGroup]="form">
? ? <select formControlName="country">
? ? ? ? <option *ngFor="let country of countries" [value]="country.id">
? ? ? ? ? ? {{ country.name }}
? ? ? ? </option>
? ? </select>
</form>
- 2 回答
- 0 關(guān)注
- 165 瀏覽
添加回答
舉報
0/150
提交
取消