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

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

您可以参考https://embed.plnkr.co/OeUYze7djU90AWmc2Sno/来了解如何使用@Input和@Output。

Answer 2

您可以将单击事件绑定添加到您的.list-group-item，以使用所选用户的数据更新变量（selectedUser）。然后，您的块可以从selectedUser中提取数据。

用户列表html：

wcc_config -u username --displayeem

阻止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>

组件TS文件：

<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>

这是一个展示概念证明https://stackblitz.com/edit/angular-hnjt3f

的堆叠闪电战

显示列表中一位用户的信息

2 个答案: