angular 中特定条件为真时如何显示和隐藏数据

Question

在我的 angular 应用程序中，我创建了仪表板页面，在该页面中创建了地图，并在右侧放置了数据以显示有关地图的信息（即，如果标记在地图上创建了半径为 5 公里的圆圈）圆圈内显示标记的详细信息）。

我已经写了如果标记的条件在圆圈内，它应该变成红色，否则变成蓝色。

并且在 Html 中我创建了 bootstrap 带有 id（无人机）的选项卡。

component.ts

inQuadrant(quadrant) {
    var inPolygon = this.isMarkerInsidePolygon(this.droneMarker, quadrant);
    if (inPolygon) {
      quadrant.setStyle({color: 'red'});
       const isRed=true;
    } else {
      quadrant.setStyle({color: '#3388ff'});
    }
  }

component.html


 <div class="tab-pane fade " id="Drones" >
    <ul class="list-group card"  id="dd">
      <li class="list-group-item" *ngFor="let x of datas">
          <div class="row no-gutters">
          <div class="col-sm-3" >
            <div class="card-body">
    <img src="{{drone01.iconref}}" width="90" height="90">
    
           </div>
        </div>
</div>
</li>
</ul>
</div>

所以我的需求是无人机在侧边（id=drones的数据应该要显示）和外边（id=drones的数据有消失)

任何人都可以帮助我 this.I 已经尝试了多种方法。

Answer 1

恐怕您正在以一种非常 non-angular 的方式来处理这个问题 - 以您提供的有限数量的代码给出一个好的答案有点困难，但是这里是：

如果您想隐藏内容，您可以：

使用*ngIf显示或不显示item，或者绑定到CSS visibility-属性，eg.: [visibility]=isHidden ? 'hidden' : 'visible'.

但我可能误解了你的问题？

Manipulating HTMLElements (quadrant.setStyle) 是 angular 中的 anti-pattern，您应该改用属性绑定。

angular 中特定条件为真时如何显示和隐藏数据

How to show and hide the data when the particular condition is true in angular

javascript

jquery

angular

twitter-bootstrap

twitter-bootstrap-3