angular - Set default value of option dropdown -
currently dropdown showing posts users, want show user user.id 1 named "leanne graham" default, can't seem figure out how default user id 1 instead of showing posts default. how can tweak code make default first option , not show posts users default?
usercomments.component.ts
<select class="form-control" (change)="reloadposts({userid: u.value})" #u> <option value="">select user...</option> <option *ngfor="let user of users" value="{{user.id}}"> {{user.name}}</option> </select> <div class="container"> <table class="table table-bordered"> <tbody *ngfor="let post of _posts"> <tr> <td>{{post.body}}</td> <td>k</td> <td>k</td> </tr> </tbody> </table> </div>
usercomments.component.ts
import { component, oninit } '@angular/core'; import {userpostservice} './userpost.service'; import {userservice} '../users/user.service'; @component({ selector: 'app-usercomments', templateurl: './usercomments.component.html', styleurls: ['./usercomments.component.css'], providers: [userpostservice, userservice] }) export class usercommentscomponent implements oninit { private _posts; users = []; private selectedid; postloading; private currentpost; constructor(private _userpostservice: userpostservice, private _userservice:userservice) { } ngoninit() { this.selectedid= this.users[1]; this._userservice.getusers() .subscribe(users => this.users = users); this.loadposts(); } loadposts(filter?){ this.postloading = true; this._userpostservice.getposts(filter) .subscribe(res => { this._posts = res; }) } reloadposts(filter){ this.currentpost = null; this.loadposts(filter); } }
use ngmodel
<select [ngmodel]="selectedid" class="form-control"
and assign id of item want have selected selectedid
, select element show item selected.
you can use user
object instance instead of user.id
need use [ngvalue]="user"
, ensure selected
in [ngmodel]="selected" gets 1 of instance from
users` assigned.
Comments
Post a Comment