Javascript 当特定条件为真时，如何显示和隐藏数据

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

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

在Html中，我创建了id为（无人机）的引导选项卡

组件。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=无人机的数据）和外部（必须消失id=无人机的数据）时，如何显示和隐藏数据。

---

关于这一点，有人能帮我吗？我已经尝试了多种方法。

我担心您是在以一种非常非角度的方式处理这一问题-您提供的代码数量有限，要给出一个好的答案有点困难，但下面是：

如果你想隐藏东西，你可以：

使用

*ngIf

显示或不显示项目，或绑定到CSS

可见性

-属性，例如：

[visibility]=isHidden？“隐藏“：”可见“

但我可能误解了你的问题

---

操作HtmleElements（

quadrant.setStyle

）在angular中是一种反模式，您应该改用属性绑定。

我想我需要补充的是，还有其他几种调整可见性的方法（调整

显示

-属性就是其中之一）-这里提到的太多了。