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

Question

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

我已经写了如果标记循环进入圆圈内，它应该变成红色，否则变成蓝色。

在这种情况下，我必须准确显示圆圈内的无人机何时必须以 html 显示一些数据。 如果外面的数据应该是隐藏的。

组件.ts

function inQuadrant(quadrant,marker){
    var inPolygon02 = isMarkerInsidePolygon02(marker,quadrant);
  if(inPolygon){
    quadrant.setStyle({color: 'red'});
  }else{
    quadrant.setStyle({color: '#3388ff'});
  }
}

从上面的代码中，如果数据是红色（圆圈内），我必须显示数据，否则隐藏数据。

组件.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>

任何人都可以帮我解决这个问题。

Answer 1

您可以使用hidden属性。 让我给你举个例子

假设，您的component class有一个property

public isRed:boolean = true;

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

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

它将隐藏此div ，如果isRed设置为false否则它将显示div 。