Angular-google-maps: Sebm-google-map-मार्कर को * ngFor के साथ लोड नहीं करता है Async

को निर्मित 9 मई 2016 · 20टिप्पणियाँ · स्रोत: SebastianM/angular-google-maps

मेरे पास async डेटा के लिए json फ़ाइल से लोड करने के लिए सेवा है। * ngFor सभी डेटा के लिए sebm-google-map-मार्कर बना देता है, लेकिन sebm-google-map नए जोड़े गए मार्कर को लोड नहीं करता है।
मार्कर। json
{ "data" : [ { "lat": 51.673858, "lng": 7.815982, "label": "A", "draggable": true }, { "lat": 51.373858, "lng": 7.215982, "label": "B", "draggable": false }, { "lat": 51.723858, "lng": 7.895982, "label": "C", "draggable": true } ] }

सेवा

getmockStores() { return this._http.get(CONFIG.baseUrls.mockstoreSelector) .map((response: Response) => <marker[]>response.json().data) .catch(this._exceptionService.catchBadResponse) }

घटक
`getMockMarkers () {

this.mockStores = this._storeService.getmockStores()
  .catch(e => {
    this._toastService.activate(`${e}`);
    return Observable.of();
  })

})
} `

.component.html
<sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [disableDefaultUI]="false"> <sebm-google-map-marker *ngFor="#m of mockStores" [latitude]="m.lat" [longitude]="m.lng" [label]="m.label" [markerDraggable]="m.draggable" (dragEnd)="markerDragEnd(m, $event)"> </sebm-google-map-marker> </sebm-google-map>

discussion / question

स्रोत

krunal039

😕1

सबसे उपयोगी टिप्पणी

मैं बस इस में भाग गया और मुझे लगा कि मैं अपने काम को चारों ओर साझा करूंगा जब कोई और इसमें भाग लेगा।

अपनी ts फ़ाइल में मैंने एक स्ट्रिंग को संख्या में बदलने के लिए एक सरल विधि जोड़ी:

private convertStringToNumber(value: string): number {
        return +value;
    }

फिर html में मैं अभी इस विधि में lat / long में पास करता हूँ:

<sebm-google-map-marker *ngFor="let location of clientLocations" [latitude]="convertStringToNumber(location.latitude)" [longitude]="convertStringToNumber(location.longitude)"></sebm-google-map-marker>

austinlarue 31 मार्च 2017

👍11

सभी 20 टिप्पणियाँ

उपरोक्त मुद्दे पर किसी भी अद्यतन करें?

krunal039 12 मई 2016

अरे @ krunal039 - क्या आप देख सकते हैं कि async कार्रवाई समाप्त होने के बाद <sebm-google-map-marker> DOM में हैं? धन्यवाद!

SebastianM 12 मई 2016

👍1

हाय सेबस्टियन, मैंने अभी-अभी अपने कोणीय 2 को नवीनतम में अद्यतन किया है और यह समस्या को हल किया है सुनिश्चित नहीं है कि यह मेरा बुरा कोड या कोणीय के साथ कुछ था। लेकिन यह तय है। क्या सभी मार्करों के आधार पर ज़ूम ऑटो सेट करने के विकल्प भी हैं?

krunal039 16 मई 2016

@ krunal039 नहीं, अभी संभव नहीं है - क्षमा करें। यदि आपको इसकी आवश्यकता है तो कृपया इसके लिए एक नया मुद्दा खोलें। इसलिए हम एपीआई विवरण पर चर्चा कर सकते हैं। धन्यवाद!

SebastianM 17 मई 2016

@ सबस्टियनम
मैं इस मुद्दे को फिर से खोलना चाहता हूं। मैं angular2 rc.4 (अब तक का सबसे हाल का angular2 रिलीज़) और इस समस्या का सामना कर रहा हूँ। मार्कर डोम पर लोड हो रहे हैं लेकिन नक्शे कैनवास पर दिखाई नहीं दे रहे हैं।

  <sebm-google-map 
      [latitude]="map_focus_lat"
      [longitude]="map_focus_lng"
      [zoom]="11">

    <sebm-google-map-marker *ngFor="let center of centers" 
    [latitude]="center.latitude" 
    [longitude]="center.longitude">
    </sebm-google-map-marker>
  </sebm-google-map>

centers प्रत्येक ऑब्जेक्ट का एक सरणी है जिसमें अक्षांश और देशांतर पैरामीटर हैं। centers सेवा के माध्यम से अतुल्यकालिक रूप से लोड किए जाते हैं। टेम्पलेट में केंद्रों के साथ *ngFor का उपयोग करने वाले अन्य HTML तत्व सही तरीके से काम कर रहे हैं। प्रत्येक केंद्र ऑब्जेक्ट के मार्करों को DOM में सही अक्षांश और देशांतर के साथ बनाया गया है लेकिन किसी कारण से वे मानचित्र पर दिखाई नहीं दे रहे हैं।

pramttl 3 जुल॰ 2016

👍2

मैं angular.rc4 का उपयोग करके उसी मुद्दे का सामना कर रहा हूं।
इसके अलावा, अगर मैं ब्राउज़र को मैन्युअल रूप से आकार देता हूं, तो मैप मुझे दिखाता है।

leoalmeida 7 जुल॰ 2016

@SebastionM मैं rc4 पर एक ही मुद्दा रहा हूँ। मार्कर नक्शे पर दिखाई नहीं दे रहे हैं। मार्कर डोम पर दिखाई दे रहे हैं

djohnston08 16 जुल॰ 2016

यहाँ एक ही मुद्दा है। कोई समाधान?

nileshmahant 26 जुल॰ 2016

यहाँ भी वही मुद्दा। कोणीय rc3 पर

georgibakken 26 जुल॰ 2016

अंत में इसका पता लगाएं।
मेरे परिदृश्य में मुझे Http सेवा का एक डेटा मिल रहा था जो JSON में आ रहा था। मैं लूप के लिए उस डेटा के लाट और लैंग फील्ड को बाइंड कर रहा था। यह काम नहीं कर रहा था। DOM में मार्कर बन रहे थे लेकिन कैनवास में प्रदर्शित नहीं हो रहे थे।

इस तरह मैंने यह पता लगाया:

मार्कर नाम का एक इंटरफ़ेस बनाया गया:
इंटरफ़ेस मार्कर {
lat: संख्या;
lng: संख्या;
लेबल ;: स्ट्रिंग;
खींचने योग्य: बूलियन;
}
जब मेरा डेटा अवलोकनीय हो जाता है, तो सदस्यता विधि पर, मैं दूसरी विधि pushMarker () कहता हूं जब डेटा पूरी तरह से प्राप्त होता है:

this.observable = this.gisDataService.getEntities (dcode);
this.observable.subscribe (
data => this.data = data.map ((एंटिटी: एंटिटी) => नया एंटिटी (एंटिटी। ल्यूड, एंटिटी। जालपा, एंटिटी। लट, एंटिटी। एलएनजी, यूनिट.टाइप, एंटिटी.टैग, एंटिटी.आधार) .desc, unit.zcode, unit.rcode, unit.dcode)),
त्रुटि => चेतावनी (त्रुटि),
() => this.pushMarkers () // यह वह जगह है जहाँ मैं फ़िनिश पर कार्य करता हूं
);

फिर मैंने अपने डेटा में लूप किया और इसे मार्कर सरणी में धकेला:

this.data.forEach (तत्व => {
this.markers.push ({
lat: संख्या (एलिमेंट.लैट),
lng: संख्या (element.lng),
लेबल: element.tag,
खींचने योग्य: असत्य
})
कंसोल.लॉग ("धकेल दिया गया" + तत्व.लाट + "," + तत्व.लंग);
};

नोट: मुझे यह पता चला है कि जब JSON में डेटा प्राप्त होता है, तो यह संख्या में परिवर्तित नहीं हो रहा है, भले ही आप JSON को एक कक्षा में मैप करें (जैसा मैंने किया था)। लेकिन पुश करने के समय (pushMarker () फ़ंक्शन में आपको स्पष्ट रूप से lat / lng को नंबर में बदलना होगा ()।

आशा है कि इससे सहायता मिलेगी।

nileshmahant 27 जुल॰ 2016

👍7 🎉2

@ निलेशमहंत सुपर! मुझे स्पष्ट रूप से संख्या () में बदलने की आवश्यकता थी। धन्यवाद :)

georgibakken 27 जुल॰ 2016

👍4

धन्यवाद @nileshmahant ने मेरी समस्या हल कर दी!

alaor 15 अग॰ 2016

मैं इस एक को फिर से खोलना चाहूंगा, घटक में रूपांतरण प्राप्त करने के बजाय, इसे परिवर्तित मान को खिलाने के लिए

seustachi 21 सित॰ 2016

मेरे लिए +1, मुझे यह पता लगाने में थोड़ा समय लगा और JSON से मार्कर लोड करने के लिए उपयोग-केस एक बहुत तार्किक है

alexjeen 3 अक्तू॰ 2016

private convertStringToNumber(value: string): number {
        return +value;
    }

फिर html में मैं अभी इस विधि में lat / long में पास करता हूँ:

austinlarue 31 मार्च 2017

👍11

अच्छा लगा!

क्या मेरा सुझाव है कि एक निजी समारोह के बजाय, क्यों न एक पाइप बनाया जाए
इसे करें। यह बहुत अच्छा लग रहा है और पोर्टेबल होगा।

इसके अलावा ज्यादा काम नहीं है।

मैं एक उदाहरण प्रदान कर सकता हूँ अगर आप एक चाहते हैं :-)

1 अप्रैल 2017 को 02:12 बजे, Austin LaRue सूचनाएं @github.com ने लिखा:

मैं बस इस में भाग गया और मुझे लगा कि मैं मामले में अपना काम साझा करूंगा
कोई और इसमें भागता है।
अपनी ts फ़ाइल में मैंने एक स्ट्रिंग को संख्या में बदलने के लिए एक सरल विधि जोड़ी:
निजी ConvertStringToNumber (मान: स्ट्रिंग): संख्या {
वापसी + मूल्य;
}
फिर html में मैं अभी इस विधि में lat / long में पास करता हूँ:
[अक्षांश] = "ConvertStringToNumber (स्थान। स्थान)" [देशांतर] = "
ConvertStringToNumber (स्थान। देशांतर) ">
-
आप इसे प्राप्त कर रहे हैं क्योंकि आपको इस धागे की सदस्यता दी गई है।
इस ईमेल का उत्तर सीधे दें, इसे GitHub पर देखें
https://github.com/SebastianM/angular2-google-maps/issues/330#issuecomment-290757110 ,
या धागा म्यूट करें
https://github.com/notifications/unsubscribe-auth/AY4FmON0vwkqtvbC3qlBK1E6SQQQAA2ks5rrSXggaJpMM4IaCkp
।

code-by-nate 1 अप्रैल 2017

वाह, मैं इस मुद्दे को खोजने से पहले एक घंटे से अधिक समय तक इसके खिलाफ अपना सिर पीटता रहा। यह मेरे लिए पूरी तरह से काम :)

oldschoolbg 10 अप्रैल 2017

सामान्य तौर पर, मेरा अनुभव यह है कि अगर एग-मार्कर डोम में दिखाई दे रहे हैं, लेकिन दिखाए नहीं गए हैं, तो आपने शायद एनजीफ़ोर को किसी तरह से एक गलत वस्तु की आपूर्ति की है (या तो अनुचित प्रकार जैसा कि ऊपर उल्लिखित नंबर प्रकार या कुछ जिसमें अव्यक्त और लंबे समय तक न हो। मेरा मामला था)। आप मार्कर सरणी पर क्या भेज रहे हैं, इसकी दोबारा जाँच करें।

cen1 31 जुल॰ 2017

मैं इस मुद्दे को फिर से खोलना चाहूंगा।
मैं पूर्व-परिभाषित मार्करों को प्रदर्शित करने की कोशिश कर रहा हूं, साथ ही स्क्रीन पर मार्कर उत्पन्न करता है यदि उपयोगकर्ता मानचित्र पर एक बिंदु पर क्लिक करता है, लेकिन ngfor का उपयोग करते हुए, मार्कर मानचित्र पर प्रदर्शित नहीं कर रहे हैं।
मेरी HTML फ़ाइल में, मेरे पास है

<sebm-google-map
          [latitude]="lat"
          [longitude]="lng"
          [zoom]="zoom"
          [disableDefaultUI]= false
          [zoomControl]= true
          (mapClick)="mapClicked($event)">

          <sebm-google-map-marker
            *ngFor="let m of markers; let i = index"
            (markerClick)="clickedMarker(m,i)"
            [latitude]="convertStringToNumber(m.lat)"
            [longitude]="convertStringToNumber(m.lng)"
            [markerDraggable]="m.draggable"
            (dragEnd)="markerDragEnd(m, $event)"
          >

            <sebm-google-map-info-window>
              <strong>{{m.name}}</strong>
            </sebm-google-map-info-window>
          </sebm-google-map-marker>
        </sebm-google-map>

और मेरी सर्विस.टीएस फ़ाइल में मार्करों को जोड़ने और प्रदर्शित करने के लिए, मेरे पास है

  getMarkers(){
    var markers = JSON.parse(localStorage.getItem('markers'));
    return markers;
  }

  addMarker(newMarker){
    //fetch marker that are already there
    var markers = JSON.parse(localStorage.getItem('markers'));

    // Push to array
    markers.push(newMarker);

    //set markers again
    localStorage.setItem('markers',JSON.stringify(markers))
  }

sadeajayi 2 अग॰ 2017

मैं भी lat और long मान string वस्तुओं के रूप में सहेज रहा था इसलिए मुझे इस तरह DecimalPipe में निर्मित का उपयोग करना पड़ा:

... *ngFor="let pin of pins" [latitude]="pin.lat|number:'1.0-8'" ...

आधिकारिक दस्तावेज: https://angular.io/api/common/DecimalPipe

kublaios 3 मई 2018

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Angular-google-maps: Sebm-google-map-मार्कर को * ngFor के साथ लोड नहीं करता है Async

सबसे उपयोगी टिप्पणी

सभी 20 टिप्पणियाँ

संबंधित मुद्दों