Установить значение по умолчанию для раскрывающегося списка опций

Question

В настоящее время мое раскрывающееся меню показывает все сообщения от всех пользователей, но я хочу, чтобы он показывал только пользователя user.id 1 по имени «Leanne Graham» по умолчанию, но не может показаться, как заставить его по умолчанию использовать идентификатор пользователя 1, а не показывать все сообщения от всех по умолчанию. Как я могу настроить мой код, чтобы сделать его по умолчанию первым, и не показывать все сообщения от всех пользователей по умолчанию?

usercomments.component.ts

<select class="form-control" (change)="reloadPosts({userId: u.value})" #u> 
    <option value="">Select a 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 } from '@angular/core'; 
import {UserPostService} from './userpost.service'; 
import {UserService} from '../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); 
} 
} 

Answer 1

Использование ngModel

<select [ngModel]="selectedId" class="form-control" 

и присвоить идентификатор элемента, который вы хотите выбрали selectedId, тогда элемент select покажет этот элемент как выбранный.

Вы также можете использовать экземпляр user объекта вместо user.id, но тогда вы должны использовать [ngValue]="user" и убедитесь, что selected в [ngModel]="selected" gets one of the instance from users` назначен.