JoshDSommer / nativescript-ngx-slides

A NativeScript + Angular module for to add a slides component to your mobile app
Other
45 stars 34 forks source link

Dynamic Create slides issues #44

Closed nikunjgajera closed 6 years ago

nikunjgajera commented 6 years ago

I am creating dynamic slides using nativescript-ngx-slides plugin. Example i have 3 person details(From Database) and i am showing only name in slides. and each slides have a person name(Label) and Add Person(Button). When add person click, i add person details in persons scope.

slides.html


<slides>
    <slide class="slide-1" *ngFor="let person of persons">
        <Label [text]="person.name"></Label>
        <Button text="Add Person" (tap)="addPerson()"></Button>
    </slide>
</slides>

slides.component.html

export class SlidesComponent implements OnInit {
    persons : Array<String> = [];
   constructor(private router: Router, private page: Page) {
    }
    @ViewChild("slides") slides: ElementRef;
    ngOnInit() {
        this.page.actionBarHidden = true;
        this.page.backgroundImage = "res://hurling";
    }
    handlePersons() {
        //Call api and get data
        this.persons = data;
    }    
   ngAfterViewInit() {
        this.handlePersons();
    }
    addPerson() {
           //Open Popup and fill details and 
           // Call Post api and save data into database
           this.persons.push(api response);
    }
}

When i added Person by Popup, after slider not working and got below error

JS: Unhandled Promise rejection: Cannot read property 'left' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'left' of undefined TypeError: Cannot read property 'left' of undefined
JS:     at SlidesComponent.positionSlides (file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-ngx-slides/slides/app/slides/slides.component.js:200:18)
JS:     at SlidesComponent.setupPanel (file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-ngx-slides/slides/app/slides/slides.component.js:186:14)
JS:     at file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-ngx-slides/slides/app/slides/slides.component.js:309:31
JS:     at ZoneDelegate.invoke (file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:365:26)
JS:     at Zone.run (file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:125:43)
JS:     at file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:760:57
JS:     at ZoneDelegate.invokeTask (file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:398:31)
JS:     at Zone.runTask (file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:165:47)
JS:     at drainMicroTaskQueue (file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:593:35)
JS: Error: Uncaught (in promise): TypeError: Cannot read property 'left' of undefined
JS: TypeError: Cannot read property 'left' of undefined
JS:     at SlidesComponent.positionSlides (file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-ngx-slides/slides/app/slides/slides.component.js:200:18)
JS:     at SlidesComponent.setupPanel (file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-ngx-slides/slides/app/slides/slides.component.js:186:14)
JS:     at file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-ngx-slides/slides/app/slides/slides.component.js:309:31
JS:     at ZoneDelegate.invoke (file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:365:26)
JS:     at Zone.run (file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:125:43)
JS:     at file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:760:57
JS:     at ZoneDelegate.invokeTask (file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:398:31)
JS:     at Zone.runTask (file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:165:47)
JS:     at drainMicroTaskQueue (file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:593:35)
JoshDSommer commented 6 years ago

@nikunjgajera where you able to get this working with the most recent published verions? closing this in favor of the existing open issue.

nikunjgajera commented 6 years ago

@TheOriginalJosh i am using 2.2.12 version, my issues and that issues are quite different, Please help how to solve this issue?