CODEWITHSUNDEEP
angular
Ben Donnelly
Ben Donnelly

Reputation: 1261

Angular 2 Default select option not populating

I am trying to give my select box the selected option on page load by setting it to a variable like this

<select style="border:0;" [(ngModel)]="accountStatuses" >
        option *ngFor="let s of accountStatuses" [ngValue]="s" [selected]="s === user.accountStatus">{{s}}</option>
</select>

The select box has its optioned, but on page load, none are selected.

Here is the relevant bits of typescript.

@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);
    }

Upvotes: 1

Views: 70

Answers (2)

Dmitry Grinko
Dmitry Grinko

Reputation: 15204

Look at this example:

accountStatus: AccountStatus;
accountStatuses: AccountStatus[];

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

Let me know if you need more details

Upvotes: 2

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657058

I think you should introduce a new field like

[(ngModel)]="selectedAccountStatuses"

instead of

[(ngModel)]="accountStatuses"

class MyComponent {
  selectedAccountStatus:string;

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

[(ngModel)]="selectedAccountStatuses"

and remove

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

Upvotes: 0

Related Questions