设置选项下拉列表的默认值

时间:2016-11-17 18:48:11

标签: angular angular2-forms

目前我的下拉列表显示了所有用户的所有帖子,但我希望它只显示来自user.id的用户1默认情况下名为“Leanne Graham”,但似乎无法弄清楚如何将其设置为默认用户ID 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);
}
}

1 个答案:

答案 0 :(得分:1)

使用"A.hpp" class A { A(); void method(); }; "A.cpp" A::A() = default; void A::method() { }

ngModel

并将您要选择的项目的ID分配给<select [ngModel]="selectedId" class="form-control" ,然后select元素会将此项目显示为已选中。

您也可以使用selectedId对象实例而不是user,但是您需要使用user.id并确保分配[ngValue]="user"个用户中的selected

相关问题