ng-bootstrap carousel：无法在NgbCarousel读取未定义的属性'toArray'

Question

无法滑到下一个错误：

错误TypeError：无法读取未定义的属性'toArray'     在NgbCarousel._getNextSlide（carousel.js：118）

有人知道吗？

    import { Component, Input } from '@angular/core';
import { FormGroup, FormControl, Validators } from  '@angular/forms';
import { Router } from '@angular/router';
import { NgbModule, NgbCarouselConfig, NgbCarousel, NgbDatepickerConfig, NgbDateStruct, NgbDateParserFormatter} from '@ng-bootstrap/ng-bootstrap';
import { User } from '../_models/user';
import { AlertService, UserService } from '../_services/index';

@Component({
    moduleId: module.id,
    templateUrl: 'register.component.html',
    styleUrls: [ 'register.css' ],
    providers: [NgbCarousel, NgbCarouselConfig],
})

export class RegisterComponent {
    model: any = new User;
    loading = false;
    dateString: string;
    inloggegevens: FormGroup;

    constructor(
        private router: Router,
        private userService: UserService,
        private alertService: AlertService,
        public configCarousel: NgbCarouselConfig,
        public carousel: NgbCarousel,
        private configDate: NgbDatepickerConfig,
        private ngbDateParserFormatter: NgbDateParserFormatter
    ) {
        configCarousel.interval = 0;
        configCarousel.keyboard = false;
        configDate.minDate = { year: 1930, month: 1, day: 1 };



    }

    register() {
        this.loading = true;
        // this.userService.create(this.model)
        //     .subscribe(
        //         data => {
        //             this.alertService.success('Registratie successvol', true);
        //             this.router.navigate(['/login']);
        //         },
        //         error => {
        //             this.alertService.error(error);
        //             this.loading = false;
        //         });
        alert('lala');
        console.log('next slide');
    }

    onSubmit() {
        this.carousel.next();
        //this.register();
    }

}

模板代码

<ngb-carousel class="register">
    <ng-container>
        <ng-template ngbSlide id="slide1">

            <div class="container">

                <div class="register_title">
                    <div class="d-flex justify-content-center">
                        <div class="col-12 text-center">
                            <h2>Inlog gegevens </h2>
                        </div>
                    </div>
                </div>

                <form class="form-login" #registerForm="ngForm" (ngSubmit)="onSubmit()">
                    <div class="wrapper-register">
                        <div class="col-12">
                            <div class="form-group">
                                <input placeholder="Gebruikersnaam" type="text" class="form-control" [(ngModel)]="model.username" name="username" #username="ngModel" required />
                                <div [hidden]="username.valid || username.pristine" class="alert alert-danger">Gebruikersnaam is verplicht!</div>
                            </div>
                            <div class="form-group">
                                <input placeholder="E-mailadres" type="email" class="form-control" [(ngModel)]="model.email" name="email" #email="ngModel" required />
                                <div [hidden]="email.valid || email.pristine" class="alert alert-danger">Voer geldig E-mailadres in!</div>
                            </div>
                            <div class="form-group">
                                <input placeholder="Wachtwoord" type="password" class="form-control" [(ngModel)]="model.password" name="password" #password="ngModel" required />
                                <div [hidden]="password.valid || password.pristine" class="alert alert-danger">Wachtwoord is verplicht!</div>
                            </div>
                            <br/>
                            <br/>
                            <div class="form-group">
                                <h3>Bevestig inloggegevens</h3>
                            </div>
                            <div class="form-group">
                                <input placeholder="Bevestig E-mailadres" type="email" class="form-control" name="emailConfirm" [(ngModel)]="model.emailConfirm" #emailConfirm="ngModel" required />
                                <div [hidden]="emailConfirm.valid || emailConfirm.pristine" class="alert alert-danger">Bevestig E-mailadres!</div>
                            </div>
                            <div class="form-group">
                                <input placeholder="Bevestig Wachtwoord!" type="password" class="form-control" name="passwordConfirm" [(ngModel)]="model.passwordConfirm" #passwordConfirm="ngModel" required />
                                <div [hidden]="passwordConfirm.valid || passwordConfirm.pristine" class="alert alert-danger">Bevestig Wachtwoord!</div>
                            </div>
                        </div>
                    </div>
                    <div class="volgende">
                        <button type="submit" [disabled]="!registerForm.form.valid || model.passwordConfirm != model.password || model.emailConfirm != model.email" class="btn right" data-slide="next" (click)="next()">Volgende</button>
                    </div>
                </form>

            </div>
        </ng-template>
    </ng-container>
    <ng-container>
        <ng-template ngbSlide id="slide2">
            <div class="container">
                <div class="register_title">
                    <div class="d-flex justify-content-center">
                        <div class="col-12 text-center">
                            <h2>Profielgegevens</h2>
                        </div>
                    </div>
                </div>
                <div class="wrapper-register">
                    <div class="col-12">
                        <form class="form-profiel" name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate>
                            <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !voornaam.valid }">
                                <input placeholder="Voornaam" type="text" class="form-control" name="voornaam" [(ngModel)]="model.voornaam" #voornaam="ngModel" required />
                                <div *ngIf="f.submitted && !userName.valid" class="help-block">Voornaam is verplicht</div>
                            </div>
                            <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !achternaam.valid }">
                                <input placeholder="Achternaam" type="text" class="form-control" name="achternaam" [(ngModel)]="model.achternaam" #achternaam="ngModel" required />
                                <div *ngIf="f.submitted && !achternaam.valid" class="help-block">Achternaam is verplicht</div>
                            </div>
                            <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !geboortedatum.valid }">
                            <div class="input-group">
                                    <input class="form-control" datepicker-popup="dd.mm.yyyy" placeholder="Geboortedatum" name="geboortedatum" [(ngModel)]="model.geboortedatum" ngbDatepicker #geboortedatum="ngbDatepicker" style="position: relative; z-index: 100000;">
                                    <div (click)="geboortedatum.toggle()" >
                                        <i class="fa fa-calendar" aria-hidden="true"></i>
                                    </div>
                            </div>
                            </div>
                            <div class="form-group">
                                <div class="direct">
                                Man <input type="radio" name="geslacht" value="man" [(ngModel)]="model.geslacht" #geslacht="ngModel" required> 
                                Vrouw <input type="radio" name="geslacht" value="vrouw" [(ngModel)]="model.geslacht" #geslacht="ngModel" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <input placeholder="Bedrijfsnaam" type="text" class="form-control" name="bedrijf" [(ngModel)]="model.bedrijf" #bedrijf="ngModel" required />
                            </div>
                        </form>
                    </div>
                </div>
                <div class="volgende">
                    <button type="submit" class="btn ">Volgende</button>
                </div>
            </div>
        </ng-template>
    </ng-container>
    <ng-container>
        <ng-template ngbSlide id="slide3">
            <div class="container">
                <div class="register_title">
                    <div class="d-flex justify-content-center">
                        <div class="col-12 text-center">
                            <h2>Adresgegevens & foto</h2>
                        </div>
                    </div>
                </div>
                <div class="wrapper-register">
                    <div class="col-12">
                        <form class="form-adres" name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate>
                            <div class="form-group">
                                <input placeholder="Straat" type="text" class="form-control" name="straat" [(ngModel)]="model.straat" #straat="ngModel" required />
                            </div>
                            <div class="form-group">
                                <input placeholder="Huisnummer + Toev." type="text" class="form-control" name="huisnummer" [(ngModel)]="model.huisnummer" #huisnummer="ngModel" required />
                            </div>
                            <div class="form-group">
                                <input placeholder="postcode" type="text" class="form-control" name="postcode" [(ngModel)]="model.postcode" #postcode="ngModel" required />
                            </div>
                            <div class="form-group" >
                                <input placeholder="Woonplaats" type="text" class="form-control" name="woonplaats" [(ngModel)]="model.woonplaats" #woonplaats="ngModel" required />
                            </div>
                            <div class="form-group">
                                <select class="form-control empty" name="land" [(ngModel)]="model.land" #land="ngModel" required>
                                    <option value="" selected disabled>-- Selecteer land</option>
                                    <option value="NL">Nederland</option>
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="volgende">
                    <button type="submit" class="btn ">Volgende</button>
                </div>
            </div>
        </ng-template>
    </ng-container>
</ngb-carousel>

希望有人能帮助我。用这个挣扎了一天吧！

Answer 1

您声明了一个名为carousel的变量，但您不能将其设置为实际的ngb-carousel对象。

要设置变量，请将模板轮播节点更改为：

<ngb-carousel #carousel class="register">

然后使用ViewChild（）将其绑定到您的typescript属性：

@ViewChild("carousel") public carousel : NgbCarousel

请注意，您可以从"carousel"装饰器中删除ViewChild()，这是为了防止您将typescript属性命名为与模板节点不同。

有关此处使用的更多示例http://www.concretepage.com/angular-2/angular-2-viewchild-example