Создание ящиков в Angular через * ngFor

Question

Я новичок в Angular, Bootstrap и front-end программировании.Я хотел бы создать несколько коробок.После нажатия на поле, его подробный вид должен отображаться над разделом «все поля».

Это то, что я пытаюсь создать:

, а затем после нажатия на поле номер 1:

Но теперь это выглядит так:

Я создаю этикоробки через Angular * ngFor loop вот так:

 <div class="container text-center" id="cryptocontainer">
  <div class="row" *ngIf="coins">
    <div *ngFor="let coin of objectKeys(coins); let i = index" id="currencybox" class="col-md-2" (click)="coinDetails(coin,i)">

      <img id="image" [src]="getImage(coin)" class="img-responsive">
      <div class="cryptoname">{{ coin }}</div>
      <div class="cryptoprice">{{ coins[coin].USD | currency:'USD':true}}</div>
      <div class="details" *ngIf="detailToggle[i]" no-lines>
        <div class="row">
          <div class="col">
            <div class="label">CHANGE(30 dni)</div>
            <canvas id="canvas{{i}}">{{ chart[i] }}</canvas>
          </div>
        </div>

        <div class="row" id="details">
          <div class="col-sm">
            <div class="label">MARKET CAP</div>
            <div class="answer">{{details.MKTCAP}}</div>
          </div>
          <div class="col-sm">
            <div class="label">CHANGE(24h)</div>
            <div class="answer">{{ details.CHANGE24HOUR }} ({{ details.CHANGEPCT24HOUR }}%)</div>
          </div>

          <div class="col-sm">
            <div class="label">MAX (24h)</div>
            <div class="answer">{{ details.HIGH24HOUR }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Сложно ответить конкретно, не видя код компонента, но концептуально вам, вероятно, не хватает понимания того, как разбить подобный пользовательский интерфейс на компоненты, а затем передавать данные между этими компонентами «угловым» способом.Есть несколько способов атаковать это.В идеале, я думаю, что вы бы переместили div детали в отдельный компонент, который имеет входные данные, которые получают детали, а затем создали бы отдельный компонент для интерактивных div, которые имеют выход, который запускает пользовательское событие при нажатии.Оба они будут созданы в шаблоне родительского компонента, который будет содержать текущее состояние щелкаемой детали.

Таким образом, когда вы щелкаете по активируемому щелчком компоненту, он передает данные своих данных обратно в родительский компонент,где это установлено в свойстве details.Поскольку входные данные для компонента display / canvas связаны с этим свойством, обнаружение угловых изменений будет обрабатывать для вас обновление этого компонента.

Здесь приведен фрагмент стека с упрощенным примером шаблона связи, который я описываю.Вы также можете сделать что-то вроде создания общего сервиса, который вы добавляете в оба, а затем обновлять его при нажатии на компонент.

https://angular -azmcxt.stackblitz.io

Редактор Stackblitz Ссылка