Question

我是Angular，Bootstrap和前端编程的新手。我想创建几个盒子。单击该框后，其详细视图应显示在所有框部分上方。

这就是我尝试制作的内容：

然后点击第1号框后：

但现在看起来像这样：

我通过Angular * ngFor循环创建这些框，如下所示：

 <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

如果没有看到您的组件代码，很难回答它，但从概念上讲，您可能缺少的是如何将这样的UI分解为组件然后在＆中的这些组件之间传递数据的理解＃34;角＆＃34;办法。有几种方法可以解决这个问题。理想情况下，我认为您将详细信息div移动到一个单独的组件，该组件具有接收详细信息的输入，然后为可单击的div创建单独的组件，这些div具有在单击时触发自定义事件的输出。这些都将在父组件的模板中实例化，这将保持所点击详细信息的当前状态。

因此，当您单击可点击组件时，它会将其详细信息数据传递回父级，并在详细信息属性上进行设置。由于显示/画布组件上的输入绑定到该属性，因此角度更改检测将处理为您更新该组件。

这是一个stackblitz，其中包含我所描述的通信模式的简化示例。你也可以做一些事情，比如创建一个注入两者的共享服务，然后在单击一个组件时更新它。

https://angular-azmcxt.stackblitz.io

Stackblitz Editor Link

通过* ngFor在Angular中创建框

1 个答案: