如何在Angular 2应用的文本输入框中显示用户名？

看起来你是想把从userService获取到的用户名填充到文本输入框里，而不是只作为占位符显示对吧？结合你给出的代码片段，我分两种常见场景给你解决方案：

场景1：每个用户对应一个输入框，默认显示该用户的名字 #

你现在的代码里所有输入框都绑定到同一个screen.createdBy，这会导致所有输入框的值同步变化，而且只是把用户名放在占位符里，并不是实际填充到输入框中。可以这样修改：

<div class="row" *ngFor="let user of users; let i = index">
  <div class="col-md-5 mb-2">
    <label>Researcher:</label>
    <!-- 注意name和id要加索引保证唯一性，避免表单验证冲突 -->
    <input 
      id="createdBy-{{i}}" 
      type="text" 
      class="form-control" 
      [(ngModel)]="screen.createdByList[i]" <!-- 用数组存储每个用户的输入值 -->
      name="createdBy-{{i}}" 
      required 
      #createdBy="ngModel" 
      [value]="user.firstName" <!-- 初始化显示当前用户的名字 -->
      placeholder="修改研究者名称"
    >
  </div>
</div>

同时在组件里要初始化对应的数组：

// 组件类中
screen = {
  createdByList: []
};

ngOnInit() {
  this.userService.getUsers().subscribe(users => {
    this.users = users;
    // 初始化输入框值为每个用户的名字
    this.screen.createdByList = this.users.map(user => user.firstName);
  });
}

如果只是想展示用户名不允许修改，直接加readonly属性即可：

<input 
  ...
  [(ngModel)]="user.firstName"
  readonly
>

场景2：选择用户后填充到单个输入框 #

如果你的需求是先列出用户，选择后把名字填充到单个输入框里，那不需要在输入框上循环，而是把循环用在用户选择控件上，比如下拉框：

<div class="col-md-5 mb-2">
  <label>Researcher:</label>
  <select 
    class="form-control" 
    [(ngModel)]="screen.createdBy"
    name="createdBy"
    required
    #createdBy="ngModel"
  >
    <option value="">请选择研究者</option>
    <option *ngFor="let user of users" [value]="user.firstName">{{user.firstName}}</option>
  </select>
</div>

要是想用按钮选择的方式，也可以这么写：

<!-- 用户选择按钮组 -->
<div class="row" *ngFor="let user of users">
  <div class="col-md-5 mb-2">
    <button class="btn btn-outline-primary" (click)="fillUserName(user)">选择 {{user.firstName}}</button>
  </div>
</div>

<!-- 单个输入框 -->
<div class="col-md-5 mb-2">
  <label>Researcher:</label>
  <input 
    id="createdBy" 
    type="text" 
    class="form-control" 
    [(ngModel)]="screen.createdBy" 
    name="createdBy" 
    required 
    #createdBy="ngModel" 
    placeholder="已选择的研究者名称"
  >
</div>

然后在组件里添加对应的方法：

fillUserName(user: any) {
  this.screen.createdBy = user.firstName;
}

内容的提问来源于stack exchange，提问作者Fabian