如何将来自后端的数据水平放置在引导水平卡中

编程问答 2022-08-11

问题描述

在我的角度应用程序中，我创建了仪表板页面，并调用了API（用于动态更改的信号（信号1，信号2..etc）等）

要显示该数据，我创建了引导水平卡。但是我无法将该数据作为内联列表项（显示水平数据）放置在水平卡中。

.component.html 

<ul class="list-group" style="background-color:#252525;color:white">
        <li class="list-group-item" style="background-color: #252525;" *ngFor="let y of signals" >
          <div class="card">
            <div class="card-horizontal">
              <div class="img-square-wrapper">
                <img class="sgl"
                  src="assets/img/img.png.png"
                  height="100" width="100" alt="Card image cap">
              </div>
              <div class="card-body">
                <h5 class="card-title">{{y.name}}</h5>
              
<h5 class="card-text text-muted" style="font-size:12px;">{{y.signal}}80.13

</h5>
<h5 class="card-text text-muted" style="font-size:12px;">{{y.signaltype}}

</h5>
</div>
     </div>
           
          </div>
        </li>
       </ul>

现在，我必须显示数据项（从后端动态更改或增加），这些数据项是y.name，y.signaltype，y.signal ..与卡中的水平位置相同。

但是我尝试了很多方法来解决这个问题。

解决方法

基于您为问题提供的标签，我假设您正在使用bootstrap v4，因此我查找了文档，但未找到您所使用的水平卡类。这是他们为水平卡提供的示例

https://getbootstrap.com/docs/4.3/components/card/#horizontal

angularangularapiapibootstrap-4twitter-bootstrap