从列表中显示一个用户的信息

Question

有这样一个用户清单：

<div class="list-group" >
  <div class="media" *ngFor="let user of users">
    <a class="list-group-item ">
      <h4 class=" media-heading list-group-item-heading"> {{user.surname_first_name}} </h4>
      <div class="row">
        <div class="col-md-9">
          <p class="list-group-item-text">{{user.position}}</p>     
       </div>
     </div>      
    </a>
  </div>
</div>

在它旁边有一个块，其中显示了关于用户的全部信息。这里有一小块：

<div class="card-content">
  <form>
    <div class="row">
      <div class="col-md-3">
        <div class="form-group form-black label-floating is-empty">
           <label class="control-label">Surname</label>
           <input type="text" class="form-control" [(ngModel)]='user.surname' name="surname" >
        </div>
      </div>
      <div class="col-md-3">
         <div class="form-group form-black label-floating is-empty">
           <label class="control-label">Name</label>
           <input type="text" class="form-control" [(ngModel)]='user.name' name="name" >
          </div>
        </div>
        ....
     </div>
  </form>
</div>

下面是如何通过单击特定的列表用户，将其数据显示在一个包含信息的块中的方法。

Answer 1

您可以向..list group-item添加一个单击事件绑定，它用所选用户的数据更新变量(selectedUser)。然后，您的块可以从selectedUser中提取数据。

用户列表html：

<div class="list-group" >
  <div class="media" *ngFor="let user of users">
    <a class="list-group-item" (click)="updateSelectedUser(user.id)">
      <h4 class=" media-heading list-group-item-heading"> {{user.surname_first_name}} </h4>
      <div class="row">
        <div class="col-md-9">
          <p class="list-group-item-text">{{user.position}}</p>     
       </div>
     </div>      
    </a>
  </div>
</div>

块html：

<div class="card-content">
  <form>
    <div *ngIf="selectedUser" class="row">
      <div class="col-md-3">
        <div class="form-group form-black label-floating is-empty">
           <label class="control-label">Surname</label>
           <input type="text" class="form-control" [(ngModel)]='selectedUser.surname' name="surname" >
        </div>
      </div>
      <div class="col-md-3">
         <div class="form-group form-black label-floating is-empty">
           <label class="control-label">Name</label>
           <input type="text" class="form-control" [(ngModel)]='selectedUser.name' name="name" >
          </div>
        </div>
        ....
     </div>
  </form>
</div>

组件TS文件：

....
export class YourComponentName  {

  selectedUser = null;

  users = [
    {'id': 1, 'position': 1, 'first_name': 'John', 'last_name': 'Adams'},
    {'id': 2, 'position': 2, 'first_name': 'Joan', 'last_name': 'Smith'}
  ]

  updateSelectedUser(userId) {
    this.selectedUser = this.users.find(el => {
      return el.id === userId
    })
  }
}

这里是一个堆栈闪电战，展示了概念https://stackblitz.com/edit/angular-hnjt3f的证明

Answer 2

您可以从列表中“输出”选定的用户，然后将该用户“输入”到您正在创建的信息块中。尝试制作两个不同的组件和一个处理所有委托的父组件。

您可以参考https://embed.plnkr.co/OeUYze7djU90AWmc2Sno/来了解如何使用“输入”和“输出”。