angular - 选择用户 ID 后显示来自 JSON 用户数组的数据

Question

我想显示数组中的用户数据。从用户列表中选择用户后，应显示有关该用户的相应详细信息。下面是我试过的代码:

 users = USERS; // contains data
 selectedUser: User;

 constructor() { }

 ngOnInit() {
}

onSelect(index): void {
this.selectedUser = index;
}

下面是我的 HTML 文件:

      <div class="row">
        <div class="col-4">
          <ul class="menu">
            <div *ngFor="let user of users; let i = index"
              (click)="onSelect(i)">
              <span><b>{{user.id}}</b></span> {{user.name}}
            </div>
          </ul>
        </div>

        <div *ngIf="selectedUser" class="col-8 menu">
          <div><span><b>id: </b></span> {{selectedUser.id}} </div>
          <div><span><b>Name:</b></span> {{selectedUser.name}} </div>
          <div><span><b>Location:</b></span> {{selectedUser.location}} </div> 
        </div>
     </div>

我应该在 ngIf 中给出什么条件才能显示数据

Answer 1

代码应该是这样的-

onSelect(index): void {
   this.selectedUser = this.users[index];
}

现在你正在分配唯一的索引，并试图从那个错误的变量中获取数据。所以试试上面的代码。它所做的是从用户数组分配相关数据并显示在您的 UI 部分。