当条件为true时，如何显示和隐藏数据

Question

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

仪表板组件.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>

现在我的要求是，如果getdistance InKm小于5公里，它必须在html页面视图中显示数据，如果距离超过5公里，则必须删除(对于移动标记<5公里或>5公里，这将是连续的(

它是为<5km用于移除>5公里不起作用，有人能帮我吗。

Answer 1

使用*ngIf可以做到这一点，您可以通过在*ngIf或任何属性中提供函数来使用，如下所示：

1. 使用属性：

在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>

2. 使用函数，如果getdistance InKm函数将返回一个数字，这也将完成任务：

   <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';

Answer 2

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这只是一个概述，语法或方法可能不是完美的