Question

我有一个离子选择器，想在选择一个选项时隐藏它的一部分

let Source = CLLocationCoordinate2D.init(latitude: lat, longitude: long)
let Destination = CLLocationCoordinate2D.init(latitude: lat, longitude: long)

func DistanceCalculator(Source:CLLocationCoordinate2D,Destination:CLLocationCoordinate2D) -> Double
{
    // HaverSine Formula to calculate Diastance On Sphere Refrences//https://www.movable-type.co.uk/scripts/latlong.html
    // Angle = sin2(∆Ø/2) + cosØ1 * cosØ2 * sin2(∆ø/2)
    // constant = 2 * atan2(√angle,√1-angle)
    // distance = R * c
    let Earth_Radius:Double = 6371 * 1000
    let LatDelta = self.DegreeToRad(Degree: (Destination.latitude - Source.latitude))
    let LongDelta = self.DegreeToRad(Degree: (Destination.longitude - Source.longitude))
    let latRad = self.DegreeToRad(Degree: Source.latitude)
    let longRad = self.DegreeToRad(Degree: Destination.latitude)

    let Angle = (sin(LatDelta/2) * sin(LatDelta/2)) + (cos(latRad) * cos(longRad) * sin(LongDelta/2) * sin(LongDelta/2))
    let constant = 2 * atan2(sqrt(Angle),sqrt(1-Angle))
    let Distance = Earth_Radius * constant
    return Distance
}


func DegreeToRad(Degree:Double) -> Double
{
    return Degree * (Double.pi / 180)
}

我要在选择该选项时将其隐藏

  <ion-select interface="popover" [ngModel]="selectedUser._id" (ngModelChange)="selectUser($event)">
    <ion-option *ngFor="let user of users" [value]="user._id">{{ getUserNickname(user) }}
      <ion-content >
        <a *ngIf="user?.isConnected">Connected</a>
        <a *ngIf="!user?.isConnected">Disconnected</a>
      </ion-content>
    </ion-option>
  </ion-select>

Answer 1

您可以执行以下操作：

<ion-select interface="popover" [ngModel]="selectedUser._id" (ngModelChange)="selectUser($event)">
    <ion-option (click) = "changeSelected(user._id)" *ngFor="let user of users[value]="user._id">getUserNickname(user) }}
    <ion-content *ngIf = "(user._id == selected)">
        <a *ngIf="user?.isConnected">Connected</a>
        <a *ngIf="!user?.isConnected">Disconnected</a>
     </ion-content>
    </ion-option>
  </ion-select>

和.ts中的

changeSelected(data){
this.selected = data;
}

Answer 2

不要使用id作为一个值，而是使用complete对象，然后检查已绑定的变量（ngModel）。如下所示：

<ion-select interface="popover" [ngModel]="selectedUser" (ngModelChange)="selectUser($event)">
    <ion-option *ngFor="let user of users" [ngValue]="user">{{ getUserNickname(user) }}
    </ion-option>
</ion-select>

检查显示/隐藏内容的绑定值：

<ion-content >
    <a *ngIf="selectedUser?.isConnected">Connected</a>
    <a *ngIf="!selectedUser?.isConnected">Disconnected</a>
</ion-content>

在选择选项上隐藏元素

2 个答案: