Ανανεωση angular/bootstrap carousel μετα απο προσθηκη εικονας.

[slevinkelevra]

Καλησπερα.

Χρησιμοποιω angular6 μαζι με το ngBootstrap carousel , που ειναι ουσιαστικα bootstrap components ετοιμα για angular. 

Θελω να προσθετω εικονες δυναμικα στο carousel. Τωρ τεσταρω στατικα προς το παρων με καρφωτες εικονες. Εχω λοιπον το πινακα με καποια json objs μεσα

images= [{'link':'https://picsum.photos/900/500/?image=5','name':'first'},{'link':'https://picsum.photos/900/500/?image=574','name':'second'},{'link':'https://picsum.photos/900/500/?image=547','name':'third'}];

και μετα μια απλη function που προσθετει μια εικονα στο τελος του πινακα και πρεπει να παει το carousel στο τελος, στη τελευταια εικονα. 
 

  addpic(){
    this.images.push({'link':'https://picsum.photos/900/500/?image=7','name':'added one'});
    // I also tried this.images.splice(this.images.length, 0, {'link':'https://picsum.photos/900/500/?image=7','name':'added one'});
    if(this.images.length>2){    // I also tried with no if statement       
      let slide = 'ngb-slide-'+String(this.images.length-1);      
      this.carousel.select(slide);               
    }    
  }//addpic

Το carousel.select υποτιθεται οτι σε παει στο slide με το συγκεκριμενο id. Τα id των slides προστιθενται αυτοματα και ακολουθουν το pattern ngb-slide-0 , ngb-slide-1 κτλ.  

Και η HTML ειναι

 

<ngb-carousel #carousel *ngIf="images">
  <ng-template ngbSlide *ngFor="let im of images; let i = index">
    <img [src]='im.link' >
    <div>
      <input type="text" value={{im.name}} >          
      <button type="button" (click)='deletepic(i)'>delete</button>   
    </div>
  </ng-template>
</ngb-carousel>

<button type="button" (click)='addpic()'>add</button> 

Γενικα δουλευει κανονικα και η εικονα προστιθεται κανονικα στο τελος

Το προβλημα

Παροτι η εικονα προστιθεται κανονικα στο τελος, δεν παει το carousel εκει. Μεσα στην addpic το select δε λειτουργει σωστα. Παει παντα στη τελευταια που ηταν ΠΡΙΝ τη προσθηκη της νεας. Δηλαδη καταληγει να πηγαινει στην προτελευταια. Δηλαδη αν εχω 3 εικονες και προσθεσω μια 4η, μετα την προσθηκη, παει παντα στη 3η. Αν ομως πατησω τα κουμπια του carousel στο UI τοτε παει κανονικα στη 4η. Δοκιμασα τη χαζομαρα να πηγαινει στη προτελευταια και μετα καλεσα τη next, τιποτα. Δοκιμασα να πηγαινει στη πρωτη και μετα καλεσα prev, παλι τιποτα. 

Δε ξερω τι μπορει να φταιει. Ειναι θεμα της ngCarousel? Μηπως ειναι θεμα γενικα της javascript/typescript και μπορω να κανω "refresh" την HTML ή τον πινακα με καποιο τροπο για να πηγαινει κανονικα στη τελευταια εικονα? 

Ευχαριστω

[Predatorkill]

Δοκιμασε με changeDetectorRef https://angular.io/api/core/ChangeDetectorRef#detectChanges η με ngZone.run να το ανανεωσεις https://angular.io/api/core/NgZone#run αλλα ισως στο ξεκινησει απο την αρχη οταν λαβει νεα φωτο.

ο @alou θα μας πει περισσοτερα

Επεξ/σία 10 Σεπτεμβρίου 2018 από Predatorkill

[slevinkelevra]

Κατσε μισο, γιατι μπερδευτηκα πιο πολυ. Πες οτι πχ κανω detect ενα change στην HTML του carousel. Ok, πως ακριβως θατο κανω "refresh" ξερω γω, για να σιγουρευτω οτι.....εκανε render κ την τελευταια εικονα?? 
Συγνωμη που ξαναγυρναω στο ιδιο θεμα και σου ξαναπεταω το μπαλακι, δε το κανω απο εξυπναδα, το κανω γιατι δε ξερω τη τυφλα μου και δε βγαζω ακρη.

Επσιης, αν βοηθαει,  εχω αλλαξει τα εξης. Εχω προσθεσει ενα ακομα κουμπι να πηγαινει στη τελευταια εικονα. Οχι οτι αυτο θα ειναι το τελικο μου UI σε καμια περιπτωση, απλα για testing. 

HTML οπως ηταν συν αυτο στο τελος
 

<button type="button" (click)='last()'>last</button> 

και στo component

  addpic(){
    this.images.push({'link':'https://picsum.photos/900/500/?image=7','name':'added one'});     
      this.last()        ; 
  }

  last(){
    let slide = 'ngb-slide-'+String(this.images.length-1);    
    this.carousel.select(slide); 
  }

αν η last κληθει απο την addpic , δηλαδη μεσω typescript, εχουμε το ιδιο προβλημα. Αν κληθει απο το κουμπι, δουλευει κανονικα. Αρα οτι γινετε μεσα απο κλικ του UI δουλευει. Δε ξερω που ακριβως μπορει να βοηθησει αυτο, απλα το λεω

Ευχαριστω

[alou]

Θα σε βοηθούσε να δεις τι γίνεται το να βάλεις ένα debugger ή να λογκάρεις το this.images.length πριν και μετά το push, γιατί η ουσία λογικά εκεί βρίσκεται. Έτσι όπως το περιγράφεις, το length δεν έχει γίνει increment όταν τρέχει το last , κάτι που είναι μάλλον αδύνατο να συμβαίνει.  Εκτός αν γίνονται και άλλα πράγματα σε αυτό το array που επηρεάζουν το length κάπου ενδιάμεσα.

[slevinkelevra]

Η ενεργεια του push θελει καποιο χρονο. Μεσα σ αυτο το χρονο γινετε η κληση της last, με αποτελεσμα να δειχνει το τελευταιο στοιχειο του πινακα ο οποιος ομως  δεν εχει ενημερωθει ακομα. Οποτε η κληση της last πρεπει να γινει αφου θα τελειωσει το images push. Αρα ας εκμεταλευτουμε μια βασικη....ιδιαιτεροτητα της javascript

  addpic(){
    this.images.push({'link':'https://picsum.photos/900/500/?image=7','name':'added one'});     
      setTimeout(() => {
        this.last();
      });  
  }

 

[alou]

ΟΧΙ!. Σε καμμία περίπτωση δεν ισχύει αυτό που φαντάζεσαι, το ότι δουλεύει έτσι - ή μάλλον το ότι φαντάζεσαι ότι δουλεύει έτσι είναι λάθος γιατί υποδυκνείει ότι το push είναι ασύγχρονο, κάτι που δεν ισχύει (μιλάμε για το Array.prototype.push ). Ίσως από το push έως το να προστεθεί σαν slide στο τέλος του slideshow μεσολαβεί κάποιο promise πχ ή requestAnimationFrame ή κάτι άλλο αντίστοιχο αλλά σίγουρα δεν αφορά τις δυο γραμμές που υπάρχουν μέσα στην addpic (και μπορείς να το επιβεβαιώσεις με ένα console.log(this.images.length) πριν και μετά το push

Η JS είναι ένα thread, line by line εκτός αν μεσολαβήσει οποιουδήποτε είδους browser API, όπως γίνεται με το setTimeout που αναφέρεις (ή xhr ή whatever). Αν δεν ολοκληρωθεί το push, δεν θα τρέξει ποτέ η επόμενη γραμμή.

To setTimeout θα στείλει το callback να εκτελεστεί: όταν δεν υπάρχει τίποτα στο call stack ΚΑΙ δεν υπάρχει τίποτα στο microtask queue (πχ promise callbacks). Αυτό λοιπόν θα είχε νόημα μόνο αν το push ήταν ασύγχρονο και δεν είναι.