Angular 2默认选择选项未填充

时间:2017-10-13 14:22:25

标签: angular

我试图通过将其设置为像这样的变量

,在页面加载时为我的选择框提供所选选项
<select style="border:0;" [(ngModel)]="accountStatuses" >
        option *ngFor="let s of accountStatuses" [ngValue]="s" [selected]="s === user.accountStatus">{{s}}</option>
</select>

选择框有选项,但在页面加载时,没有选择。

这是打字稿的相关部分。

@Component({
    selector: 'user-detail',
    templateUrl: './user-detail.component.html',
    styleUrls: ['./user-detail.component.css']
})

export class UserDetailComponent implements OnInit {
    user: User;
    userRoles: UserRole[] = [];

    roleAmountStatusMessage = 'Show More..'
    roleAmountStatus = false;
    rolesSice1 = 1;
    rolesSice2 = 10;

    pageRequests: PageRequest[] = [];

    accountStatuses = ['Archived', 'Disabled', 'Enabled', 'Locked'];

    constructor(private userService: UserService, private route: ActivatedRoute, private roleService: RoleService) { }

    ngOnInit(): void {
        let userId = +this.route.snapshot.paramMap.get('id');
        this.userService.getUser(userId).then(user => this.user = user);
        this.userService.getUserLast25PageRequests(userId).then(pageRequest => this.pageRequests = pageRequest);
        this.roleService.getRolesByUserId(userId).then(userRoles => this.userRoles = userRoles);
    }

2 个答案:

答案 0 :(得分:2)

看看这个例子:

accountStatus: AccountStatus;
accountStatuses: AccountStatus[];

<select [(ngModel)]="accountStatus" >
        <option *ngFor="let s of accountStatuses" [ngValue]="s">{{s}}</option>
</select>

如果您需要更多详细信息,请与我们联系

答案 1 :(得分:0)

我认为你应该引入一个像

这样的新领域
[(ngModel)]="selectedAccountStatuses"

而不是

[(ngModel)]="accountStatuses"
class MyComponent {
  selectedAccountStatus:string;

   ngOnInit() {
     ... 
     this.selectedAccountStatus = this.accountstatuses[0];
   }
[(ngModel)]="selectedAccountStatuses"

并删除

[selected]="s === user.accountStatus"