如何在条件为真时显示和隐藏数据

Question

在我的 angular 应用程序中，我创建了仪表板页面。在该页面中，我根据必须在视图上显示的条件创建了一些条件，如果条件为假，它将从视图页面中删除。

Dashboard.component.ts

var insidecirclespace1 = (lat,long) => {
for (var i=0; i< this.sensors.length;i++){

  if (getDistanceFromLatLonInKm(this.sensors[i].latitude, this.sensors[i].longitude, lat,long) <= 5.0) {
    circlemark[i].setStyle({ color: 'red', weight: 1, opacity: 7.0 });
    
      "model": "1001",
      "sensorname": "Sensor 1",
     
     "rf": "1",
      "Idref": "1"
    });

  }
  
  }
  outsidespace(latlngs[latlngidx1].lat,latlngs[latlngidx1].lon,latlngs02[latlngidx2].lat,latlngs02[latlngidx2].lon);

}

var insidecirclespace2 = (lat,long) => {
  for (var i=0; i< this.sensors.length;i++){
  
    if (getDistanceFromLatLonInKm(this.sensors[i].latitude, this.sensors[i].longitude, lat,long) <= 5.0) {
      circlemark[i].setStyle({ color: 'red', weight: 1, opacity: 7.0 });

      this.wifiDrones.push({
       
        "model": "1002",
        "sensorname": "Sensor 2",
        "rf": "1",
        "Idref": "1"
      });
 }
     
    }

    outsidespace(latlngs[latlngidx1].lat,latlngs[latlngidx1].lon,latlngs02[latlngidx2].lat,latlngs02[latlngidx2].lon);
   }

  var outsidespace = (lat1,long1,lat2,long2)=>{

    for (var i=0; i< this.sensors.length;i++){
  
      if (getDistanceFromLatLonInKm(this.sensors[i].latitude, this.sensors[i].longitude, lat1,long1) > 5.0 && getDistanceFromLatLonInKm(this.sensors[i].latitude, this.sensors[i].longitude, lat2,long2) > 5.0) {
        circlemark[i].setStyle({ color: 'blue', weight: 1, opacity: 7.0 });
      
        }
}
    
    }

基于上述条件，html 页面将显示为

.component.html

 <div class="col-sm-4">
                  <div class="card-body">
  
                    <h5 class="card-text " style="color: white;"> {{x.model}}
                    </h5>

<!--some code -->
  </div>
</div>

现在我的要求是，如果 getdistanceInKm 小于 5 公里，它必须在 html 页面视图上显示数据，如果距离大于 5 公里，它必须删除（它将连续移动标记<5km 或 >5km)

它即将到达 <5 公里，因为在 >5 公里内移除不起作用任何人都可以帮助我解决这个问题。

Answer 1

HTML

<div  *ngIf="validation()">
 <h5 class="card-text " style="color: white;"> {{x.model}}</h5>
</div>

.TS

validation() {
       // logic if less than 5 km return 
     return true;
      }

P.s这只是一个概述，语法或方法可能并不完美

Answer 2

使用 *ngIf 就可以了，您可以通过在 *ngIf 或任何属性中提供您的函数来使用，如下所示：

使用属性:

在你的 ts 文件中你可以创建一个属性例如距离：

distance: number = 0;

并在您的函数中更新您的距离属性并使用绑定您可以显示和隐藏您的 HTML 元素，如下所示：

<div class="col-sm-4" *ngIf="distance < 5">
    <div class="card-body">
        <h5 class="card-text " style="color: white;"> {{x.model}}
         </h5>
    <!--some code -->
      </div>
    </div>

使用一个函数，如果 getdistanceInKm 函数将 return 一个数字，这也将完成这项工作：

<div class="col-sm-4" *ngIf="getdistanceInKm()< 5">
<div class="card-body">
<!--some code -->
  </div>
</div>

已更新 您也可以按如下方式使用 ViewChild 来更改 ts 文件中的 HTML 元素：

HTML 文件:

<div #distanceElement class="col-sm-4">
<div class="card-body">
<!--some code -->
  </div>
</div>

ts 文件：

@ViewChild('distanceElement ') el:ElementRef;

当发生变化时，您可以使用：

 this.el.nativeElement.style.display='none';

如何在条件为真时显示和隐藏数据

How to show and hide the data when the condition is true

html

javascript

angularjs

typescript

angular