Генерация динамических шаблонных ссылочных переменных в Angular 6 - PullRequest
Новая
       23

Генерация динамических шаблонных ссылочных переменных в Angular 6

0 голосов
/ 04 июня 2018

У нас есть настроенный компонент из 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 заканчивается созданием той же ссылочной переменной # карта для всех наших сгенерированных карт, а затем, когда кнопка запуска нажата с любой из карт, все карты заканчивают вращаться вместо этой конкретной карты.

Вот вся структура: 

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

Любая помощь / рекомендации или альтернативы будут высоко оценены!

...