Question

我的主页上有一个搜索表单，其中包含输入框和选择下拉列表。用户可以通过键入位置或通过html5地理位置搜索其他用户。因此，当用户第一次访问该页面时，它会询问用户是否让应用知道他们的位置。如果他们同意，则从下拉列表中获取纬度经度和选定的选项并运行数据库查询。但是我不确定我的下一次尝试是否应该如此。因为当用户使用或不使用地理位置进行搜索时，我也想绑定select。我的选择输入是

<div class="input-group-btn">
  <select class="btn btn-danger btn-lg" style="border-radius: 0px;" bindon-ngModel="btype" on-ngModelChange="search($event)" on-ngModelChange="successPosition($event)" name="btype" >
      <option *ngFor="let btype of bloodtypes" [value]="btype">{{btype}}</option>
  </select>
</div>

我在angular2组件中的地理定位功能如下所示

geolocation: function(){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(this.successPosition,
            this.failurePosition, { 
                                    enableHighAccuracy: true, 
                                    timeout:3000,
                                    maximumAge: 4000 });
    }
    else{
        return(false);
    }
},
successPosition: function(position){
    if(position.coords.latitude && position.coords.longitude){
        self.latitude = position.coords.latitude;
        self.longitude = position.coords.longitude;
    }else{
        self.btype = position;
    }
    window.location.replace("/users?utf8=✓&longitude=" + 
         encodeURIComponent(self.longitude) + "&latitude=" + 
         encodeURIComponent(self.latitude) + "&btype=" + 
         encodeURIComponent(self.btype));
    },

但当successPosition()收到参数时，我无法同时指定latitude，longitude和btype。如果我指定latitude和longitude，则btype未定义，反之亦然。请告诉我这是我该怎么做或有另一种方法？

Answer 1

这就是你要找的东西：

successPosition: function(position){
     self.btype = position;

     self.latitude = (position.coords) ? position.coords.latitude : 'something else';
     self.longitude = (position.coords) ? position.coords.longitude : 'something else';


     window.location.replace("/users?utf8=✓&longitude=" + encodeURIComponent(self.longitude) + "&latitude=" + encodeURIComponent(self.latitude) + "&btype=" + encodeURIComponent(self.btype));
}

Answer 2

通过上面的Sonicd300添加答案，问题实际上是successPosition函数中的if-else块。在上面的答案中，他提供了一个选项，通过提供一个tenary运算符来重写函数，在这里阅读更多相关信息 - Javascript one line If...else...else if statement

你可以改写这个 -

successPosition: function(position){
     self.btype = position;

     self.latitude = (position.coords) ? position.coords.latitude : 'something else';
     self.longitude = (position.coords) ? position.coords.longitude : 'something else';


     window.location.replace("/users?utf8=✓&longitude=" + encodeURIComponent(self.longitude) + "&latitude=" + encodeURIComponent(self.latitude) + "&btype=" + encodeURIComponent(self.btype));
}

通过编写此内容并指定默认的经度和纬度，以防用户在页面加载时未提供。

successPosition: function(position) {
    self.btype = position;
    if (position.coords.latitude && position.coords.longitude){
        self.latitude = position.coords.latitude;
        self.longitude = position.coords.longitude;
    } else {
    self.latitude = 'assign some default latitude'; // you should never assume that this will always be provided by the user on page load
    self.longitude = 'assign some default longitute'
}
window.location.replace("/users?utf8=✓&longitude=" + 
     encodeURIComponent(self.longitude) + "&latitude=" + 
     encodeURIComponent(self.latitude) + "&btype=" + 
     encodeURIComponent(self.btype));
}

将相同的事件发送到angular2

2 个答案: