当特定条件以角度为真时如何显示和隐藏数据

Question

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

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

在 Html 中，我创建了带有 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的数据必须消失）时显示和隐藏数据

谁能帮我解决这个问题。我尝试了多种方法。

Answer 1

恐怕你是在以一种非常无角度的方式来解决这个问题 - 由于你提供的代码数量有限，很难给出一个好的答案，但这里是：

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

使用*ngIf 显示或不显示项目，或绑定到CSS visibility-property，例如：[visibility]=isHidden ? 'hidden' : 'visible'。

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

操作 HTMLElements (quadrant.setStyle) 在 Angular 中是一种反模式，您应该改用属性绑定。