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

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

在我的 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 已经尝试了多种方法。

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

如果您想隐藏内容,您可以:

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

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

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