Async data binding issues

[Sicrum]

Hello

I am using this markup to draw route and numbered circles in destinations:

> <aol-map [width]="'100%'" [height]="'500px'">
>     <aol-view [zoom]="2">
>         <aol-coordinate [x]="5.795122" [y]="45.210225" [srid]="'EPSG:4326'"></aol-coordinate>
>     </aol-view>
>     <aol-layer-tile>
>         <aol-source-osm></aol-source-osm>
>     </aol-layer-tile>
>     <aol-layer-vector>
>         <aol-source-vector > 
>             <aol-feature>
>                 <aol-geometry-linestring> 
>                     <aol-collection-coordinates [coordinates]="wayPoints" [srid]="'EPSG:4326'">
>                     </aol-collection-coordinates>
>                     <aol-style>
>                         <aol-style-stroke [color]="'red'" [width]="2"></aol-style-stroke>
>                     </aol-style>
>                 </aol-geometry-linestring>
>             </aol-feature>
>             <aol-feature *ngFor="let destination of destinations">
>                 <aol-geometry-point>
>                     <aol-coordinate [x]="destination.lng" [y]="destination.lat" [srid]="'EPSG:4326'"></aol-coordinate>
>                     <aol-style>
>                         <aol-style-text [text]="destination.num"></aol-style-text>
>                         <aol-style-circle [radius]="12" >
>                             <aol-style-stroke [color]="'darkblue'" [width]="2"></aol-style-stroke>
>                             <aol-style-fill [color]="'white'"></aol-style-fill>
>                         </aol-style-circle>
>                     </aol-style>
>                 </aol-geometry-point>
>             </aol-feature>
>         </aol-source-vector>
>     </aol-layer-vector>
> </aol-map>

Route data is loaded async when user clicks button in UI. First run is ok. When click a button 2nd time then I get 2 issues here: 1) geometry-linestring is not cleared out when wayPoints is refreshed with new value. Map keeps existing route geometry and starts drawing new geometry from last point 2) "cannot call method 'forEach' of undefined ..." is thrown for *ngFor="let destination of destinations"

Async data refresh looks like that:

this.distanceService.getDistance().subscribe( d => { .....
....
            this.destinations = destinations;
            this.wayPoints = wayPoints;
});

Any ideas?

Thanks.

[Sicrum]

Related to this issue. Added *ngIf to aol-map:

<button class="btn btn-xs btn-info" (click)="map = !map">Toggle Map</button>
.....
<aol-map [width]="'100%'" [height]="'500px'" style="background-color: lightgrey" *ngIf="map">

Also throwing

inline template:89:16 caused by: Cannot read property 'forEach' of undefined

when map == false

[quentin-ol]

Could you write a minimal example that reproduces this error? JSBin/JSFiddle or equivalent would be best.

Thx,

Quentin

[Sicrum]

https://plnkr.co/edit/qrXLt52qUze8HifrJlOL?p=preview

Issue 1 Click "Toggle map". Map disappears and never shown again

Issue 2 Restart. Click "Route 1" - you will see route with destinations circles Restart. Click "Route 2" - you will see almost same route near by. Now click "Route 1" again. Application hangs and that is what I see: https://www.screencast.com/t/s9e96c7h

Not sure how to see exceptions in plunker. In my app I am getting:

"inline template:89:16 caused by: Cannot read property 'forEach' of undefined"

[quentin-ol]

Thx, I will look into it.

-------- Message d'origine -------- De : "Renat K." notifications@github.com Date : 25/01/2017 18:47 (GMT+01:00) À : quentin-ol/angular2-openlayers angular2-openlayers@noreply.github.com Cc : LAMPIN Quentin IMT/OLPS quentin.lampin@orange.com, Comment comment@noreply.github.com Objet : Re: [quentin-ol/angular2-openlayers] Async data binding issues (#35)

https://plnkr.co/edit/qrXLt52qUze8HifrJlOL?p=preview

Issue 1 Click "Toggle map". Map disappears and never shown again

Issue 2 Restart. Click "Route 1" - you will see route with destinations circles Restart. Click "Route 2" - you will see almost same route near by. Now click "Route 1" again. Application hangs and that is what I see: https://www.screencast.com/t/s9e96c7h

Not sure how to see exceptions in plunker. In my app I am getting:

"inline template:89:16 caused by: Cannot read property 'forEach' of undefined"

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/quentin-ol/angular2-openlayers/issues/35#issuecomment-275179733, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AOYyYqS-NFkTjOhSX8ul19K6qA-uOm3cks5rV4qdgaJpZM4LrSPg.

---

Ce message et ses pieces jointes peuvent contenir des informations confidentielles ou privilegiees et ne doivent donc pas etre diffuses, exploites ou copies sans autorisation. Si vous avez recu ce message par erreur, veuillez le signaler a l'expediteur et le detruire ainsi que les pieces jointes. Les messages electroniques etant susceptibles d'alteration, Orange decline toute responsabilite si ce message a ete altere, deforme ou falsifie. Merci.

This message and its attachments may contain confidential or privileged information that may be protected by law; they should not be distributed, used or copied without authorisation. If you have received this email in error, please notify the sender and delete this message and its attachments. As emails may be altered, Orange is not liable for messages that have been modified, changed or falsified. Thank you.

[Sicrum]

Hello. Any updates?

[quentinlampin]

Not yet, I have a few deadlines that require my time. Anyone willing to investigate in the meantime? -------- Message d'origine --------De : "Renat K." notifications@github.com Date : 30/01/2017 12:19 (GMT+01:00) À : quentin-ol/angular2-openlayers angular2-openlayers@noreply.github.com Cc : Subscribed subscribed@noreply.github.com Objet : Re: [quentin-ol/angular2-openlayers] Async data binding issues (#35) Hello. Any updates?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

{"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/quentin-ol/angular2-openlayers","title":"quentin-ol/angular2-openlayers","subtitle":"GitHub repository","main_image_url":"https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png","avatar_image_url":"https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png","action":{"name":"Open in GitHub","url":"https://github.com/quentin-ol/angular2-openlayers"}},"updates":{"snippets":[{"icon":"PERSON","message":"@Sicrum in #35: Hello. Any updates?"}],"action":{"name":"View Issue","url":"https://github.com/quentin-ol/angular2-openlayers/issues/35#issuecomment-276037780"}}}

[Sicrum]

Found an issue https://www.screencast.com/t/qqzP5ybcIns

.instance was missing so OL native element could not be found and forEach threw an exception. This is in FeaturesComponent. Have not checked other components

[quentinlampin]

Hey, truly sorry I let this slip out of my mind. Have you found a solution yet ? I tried to run the plunker but it does not show anything. There is no error in the console as well. Is it meant to be downloaded and ran locally ?

[Sicrum]

Yes, I have found a solution. Checkout my previous comment. In FeaturesComponent there was missing ".instance". I have added fix into my local node_modules and now it works perfect

[quentinlampin]

Great!

Could you create a PR for this ?

From: "Renat K." notifications@github.com Reply-To: quentin-ol/angular2-openlayers reply@reply.github.com Date: Friday, 10 February 2017 at 14:03 To: quentin-ol/angular2-openlayers angular2-openlayers@noreply.github.com Cc: Quentin Lampin quentin.lampin@gmail.com, Comment comment@noreply.github.com Subject: Re: [quentin-ol/angular2-openlayers] Async data binding issues (#35)

I have added fix into my local node_modules and now it works perfect

[achimha]

Suggest to close this ticket, my latest PR contains the fix for this issue.

[quentinlampin]

great, thanks!