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

Question

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

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

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

component.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>

谁能帮我解决这个问题。

Answer 1

您可以使用hidden 属性。 举个例子吧

假设，您的component class 中有一个property

public isRed:boolean = true;

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

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

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