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

Question

在我的角度应用程序中，我创建了仪表板页面，在其中创建了地图并在右侧放置了数据以显示有关地图的内容（即如果圆圈内的标记显示标记的详细信息，则在 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'});

    }

  }

组件.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&nbsp;visibility-property，例如：[visibility]=isHidden ? 'hidden' : 'visible'。但我可能误解了你的问题？操作 HTMLElements (&nbsp;quadrant.setStyle) 是角度的反模式，您应该改用属性绑定。