0

我正在一个网站上工作，我有多个代表产品的卡片。我想在每张卡片的顶部都有标签，以便用户可以看到更多详细信息；但是，当我尝试这样做时，无论我单击哪张卡上的选项卡，只有第一张卡会发生变化。我认为这是因为由于循环，每个 id 和 aria-controls 都是相同的，但我不知道如何解决这个问题。请帮忙。

更新：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="card border-dark mb-3 mx-auto text-center" *ngFor="let p of products">

  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id='product-tab' data-toggle='tab' role="tab" aria-controls="product" aria-selected="true" href="#product">Product</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id='user-tab' data-toggle='tab' role="tab" aria-controls="user" aria-selected="false" href="#user">User</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id='details-tab' data-toggle='tab' role="tab" aria-controls="details" aria-selected="false" href="#details">Details</a>
      </li>
    </ul>
  </div>

  <div class="card-body">
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="product" role="tabpanel" aria-labelledby="product-tab">

        <h5 class="card-title">{{p.name}}</h5>
        <div role="separator" class="dropdown-divider"></div>
        <h6 class="card-subtitle">
          <i>{{p.location}} | {{p.quantity}} available</i>
          <br>
          <small class="text-muted">Uploaded {{p.datePosted | date}}</small>
        </h6>
        <div role="separator" class="dropdown-divider"></div>
        <p class="card-text">{{p.description}}</p>

      </div>
      <div class="tab-pane fade" id="user" role="tabpanel" aria-labelledby="user-tab">
        <h5 class="card-title">{{p.userName}}</h5>
        <hr>
        <h6 class="card-subtitle">
          Contact Information:
        </h6>
        {{p.phone | phone}} {{p.email}}
        <hr>
        <h6 class="card-subtitle">
          Bell Id:
        </h6>
        {{p.employeeNumber}}
      </div>
      <div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab">{{p.datePosted}}</div>
    </div>



  </div>

  <div class="card-footer">
    <button type="button" class="btn btn-outline-primary" (click)='rejectProduct(p.id)' [routerLink]="['/admin/products']">REJECT</button>
    <button type="button" class="btn btn-outline-primary" (click)='approveProduct(p.id)' [routerLink]="['/admin/products']">APPROVE</button>
  </div>

</div>

4

1 回答 1

0

首先，如果您还没有这样做，请记住包含 Bootstrap javascript 文件（它们不在您的代码示例中）。

假设您链接了正确的引导文件，您需要在每个循环上为您的元素提供唯一的 ID，以便您的选项卡将调用正确的选项卡窗格内容。为此，只需在生成卡片的脚本中声明一个变量，并将其附加到每个循环中的 ID（例如id="product-tab-0"、id="product-tab-1"等）。

于 2020-03-11T03:15:22.167 回答