Javascript 如何编写代码在if条件下显示和隐藏数据

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

我已经写了如果标记的循环出现在圆圈内，它应该变成红色或者蓝色

在这种情况下，我必须准确显示无人机何时进入圆圈，我必须以html显示一些数据。 如果在外部，则应隐藏数据。

组件。ts

function inQuadrant(quadrant,marker){
    var inPolygon02 = isMarkerInsidePolygon02(marker,quadrant);
  if(inPolygon){
    quadrant.setStyle({color: 'red'});
  }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>

---

有人能帮我吗。

您可以使用

隐藏属性。
让我给你举个例子

假设在
组件类中有一个
属性

public isRed:boolean=true

在组件
html
文件中，可以绑定
hidden
属性

<div [hidden]="!isRed">
</div>



它将隐藏此
div
，如果
isRed
设置为
false
，否则它将显示
div
，
我不明白，请您解释一下我提到的上述if条件。在ts文件中创建属性isRed。在函数inQuadrant（）中，如果inPolygon的值为true，则将isRed的值设置为true。