html - 如何使用选项卡显示特定用户的信息而不仅仅是第一个

Question

我从一个 API 调用中获得了多个用户，并且所有用户都是使用相同的 html 和 css 生成的。当我浏览每个用户的选项卡时，只有第一个用户而不是特定用户发生变化。我试过插入 id 但没有效果。这是代码。

<div *ngFor="let user of users" class="container emp-profile">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="true">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="address-tab" data-toggle="tab" href="#address" role="tab" aria-controls="address" aria-selected="false">Address</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="company-tab" data-toggle="tab" href="#company" role="tab" aria-controls="company" aria-selected="false">Company</a>
    </li>
  </ul>

<div class="row">
  <div class="col-md-4">
  </div>
  <div class="col-md-8">
    <div class="tab-content profile-tab" id="myTabContent">
      <div class="tab-pane fade show active" id="about" role="tabpanel" aria-labelledby="about-tab">

Answer 1

在使用 *ngFor 时，您不应向 html 元素提供静态 ID。您将获得多个具有相同 ID 的 html 元素，因此您的 <a>标签将不知道确切的去向，并将瞄准他们遇到的第一个。这就是为什么只有您的第一个用户发生变化的原因。

您可以使用 Angular 指定动态 ID:

<div [id]="'my-tab-' + user.name"></div> // id === 'my-tab-user1'