时间戳

首页 > 解决方案 > 如何以角度形式保存传单坐标？

angular - 如何以角度形式保存传单坐标？

问题描述

我目前正在使用 angular、mongodb nodejs 和传单进行项目。项目表单使用带有传单的反向地理编码来获取用户标记的坐标，必须在自动指示的输入中输入坐标（直到这里它才有效）。问题是当我提交要保存在mongo数据库中的表单时，应该存储坐标的字段是空的（表单中的其他数据被保存但坐标字段没有）。我认为问题与 ngModel 相关，因为如果我手动输入坐标（通过键入它们），则可以保存坐标。

我对此是真诚的，我对此知之甚少（我从这个开始），我已经解决这个问题好几天了，但无法解决它。我希望有人可以帮助我，我将不胜感激。泰

HTML-

<input  id="lat" name="latitude" #latitude="ngModel"[(ngModel)]="publication.latitude" />            


<input id="lon"  name="longitude"  #longitude="ngModel" [(ngModel)]="publication.longitude" />


<input type="submit" value="Enviar" [disabled]="!newPubForm.form.valid"/>

TS-



    const map = new L.Map('map', { 'center': [51.441767, 5.480247], 'zoom': 12,});


    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'}).addTo(map);

        var marker = L.marker([51.441767, 5.470247],  {draggable: true
          }).addTo(map);


        marker.on('dragend', function (e) {
            (document.getElementById('lat') as HTMLInputElement).value = marker.getLatLng().lat;
            (document.getElementById('lon') as HTMLInputElement).value = marker.getLatLng().lng;

             });

onSubmit(form){

        this._publicationService.addPublication(this.token, 
        this.publication).subscribe(
            response => {
                if(response.publication){
                    //this.publication = response.publication;

                    if(this.filesToUpload && this.filesToUpload.length){
                        //Subir Imagen
                               this._uploadService.makeFileRequest(this.url+'upload-image-pub/'+response.publication._id, [], this.filesToUpload, this.token, 'image')
                               .then((result:any) =>{
                               this.publication.file = result.image;
                               this.status = 'success';
                               form.reset();
                    });    

                }else{
                               this.status = 'success';
                               form.reset();
                }


                }else{
                    this.status = 'error';

                }

            },
            error => {
                var errorMessage = error;
                console.log(errorMessage);
                if(errorMessage != null){
                    this.status = 'error';

                }

            }
        );
    }

标签： angularmongodbleaflet

解决方案

操作 DOM 应该是Angular 中的最后手段。它可能会导致这样的问题，角度不会与以下内容同步：

(document.getElementById('lat') as HTMLInputElement).value = marker.getLatLng().lat;

Angular 通常有各种工具来以“正确”的方式做事，而不是操纵 DOM。因此，不要将值设置为 html 元素，而是将值设置为您的[(ngModel)].

另外我建议您养成使用箭头语法而不是 , 的习惯function，以保留this.

因此，将您的作业更改为：

marker.on('dragend', () => {
  this.publication.latitude = marker.getLatLng().lat;
  this.publication.longitude = marker.getLatLng().lng;
});

推荐阅读