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'

如何使用标签来显示特定用户的信息，而不仅仅是第一个

1 个答案: