2

我们有一个来自 MDB ( http://mdbootstrap.com ) 的定制组件，它需要定义模板引用变量。

我们正在创建一个使用卡片组件( https://mdbootstrap.com/angular/components/flipping-cards/ ) 的列表。我们为一张卡片定义基本模板，然后使用*ngFor循环遍历数据并为我们数据中的每个条目创建一个相同模板的卡片。

卡片组件使用如下结构：

<mdb-card-rotating #cards>

  <!-- Card's structure comes in here -->

  <!--Triggering button-->

  <a class="rotate-btn" data-card="card-1" (click)="cards.toggle()">

</mdb-card-rotating>

该组件使用模板引用变量#cards来运行函数toggle()，该函数会旋转卡片以显示其他内容。

但是，这个引用变量需要对每张卡都是唯一的；在我们当前的设置中，*ngFor循环最终为我们生成的所有卡片创建相同的引用变量#card，然后，当从任何卡片按下触发按钮时，所有卡片最终都会旋转，而不仅仅是旋转具体卡。

这是整个结构：

<div class="mb-5 pb-4 col-sm-12 col-xs-12 col-md-12 col-lg-4" *ngFor="let el of fetchedResults; let i =  index">
  <div class="col-md-12">
    <mdb-card-rotating #cards>
      <!--Front Side-->
      <div class="face front tp-box_side tp-box_front">
        <!-- Image-->
        <div class="card-up">
          <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2859%29.jpg" class="img-fluid">
        </div>
        <!--Avatar-->
        <div class="avatar">
          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%289%29.jpg" class="rounded-circle img-responsive">
        </div>
        <!--Content-->
        <div class="card-body">
          <h4>{{ el.first_name }} {{ el.last_name }}</h4>
          <p>{{ el.profession }}</p>
          <!--Triggering button-->
          <a class="rotate-btn" data-card="card-1" (click)="cards.toggle()"><i class="fa fa-repeat"></i> Click here to
            rotate</a>
        </div>
      </div>
      <!--/.Front Side-->

      <!--Back Side-->
      <div class="back tp-box_side tp-box_back">

        <!--Content-->
        <h4>About me</h4>
        <hr>
        <p>{{ el.about }}</p>
        <hr>
        <!--Social Icons-->
        <ul class="list-inline">
          <li class="list-inline-item">
            <a class="icons-sm fb-ic">
              <i class="fa fa-facebook"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="icons-sm tw-ic">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="icons-sm gplus-ic">
              <i class="fa fa-google-plus"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="icons-sm li-ic">
              <i class="fa fa-linkedin"></i>
            </a>
          </li>
        </ul>
        <!--Triggering button-->
        <a class="rotate-btn" data-card="card-1" (click)="cards.toggle()">
          <i class="fa fa-undo"></i> Click here to rotate back</a>

      </div>
      <!--/.Back Side-->
    </mdb-card-rotating>

  </div>
</div>

任何帮助/指导或替代方案将不胜感激！

4

0 回答 0