javascript - Gerando Variáveis de Referência de Template Dinâmicas no Angular 6

Temos um componente personalizado da MDB (http://mdbootstrap.com), que requer a definição de variáveis de referência de template.

Estamos criando uma listagem que utiliza um Componente de Cartão (https://mdbootstrap.com/angular/components/flipping-cards/). Definimos o modelo básico para um cartão e, em seguida, usamos *ngFor para percorrer os dados e criar um cartão do mesmo modelo para cada entrada em nossos dados.

O componente de cartão usa a seguinte estrutura:

<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>

Este componente usa a variável de referência de template #cards para executar a função toggle(), que gira o cartão para exibir conteúdo adicional.

No entanto, essa variável de referência precisa ser única para cada cartão; em nossa configuração atual, o loop *ngFor acaba criando a mesma variável de referência #card para todos os nossos cartões gerados e, então, quando o botão de disparo é pressionado em qualquer um dos cartões, todos os cartões acabam girando em vez de apenas aquele cartão específico.

Aqui está toda a estrutura:

<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>

Qualquer assistência/orientação ou alternativas seria muito apreciada!