2017-02-11 2 views
3

J'essaie d'utiliser toastr dans angularjs 2 comme un service qui sera injecté dans mon composant comme mentionné ci-dessous. Lorsque la fonction handleEvent est appelée, je reçois "Impossible de lire la propriété 'extend' de undefined". Toute suggestion et/ou explication de l'erreur est très appréciée.(Angular2) Impossible de lire la propriété 'extend' de undefined pour toastr

app.moudle.ts a importé ToastrService et ToastrService a été ajouté dans les fournisseurs.

//events/events-list.components.ts 

import { ToastrService } from '../common/toastr.service'; 
@Component ({ 
    selector: 'event-list', 
    template: ` 
    <div> 
     <h1> Upcoming Angular 2 Event </h1> 
     <hr> 
     <div class="row"> 
      <div *ngFor="let event_data of all_data" class="col-md-5"> 
       <event-thumbnail (click)="handleEvent(event_data.name)" [event]="event_data"></event-thumbnail> 
    </div> 
      </div> 
     </div> 
    ` 
}) 

export class EventListComponent implements OnInit { 
    all_data:any[] 
    constructor(private eventService : EventService , private toastr : ToastrService){ 
    //moved code from here to ngOnInit 
    } 

    ngOnInit(){ 
    this.all_data = this.eventService.getEvents(); 
    } 

    handleEvent(eventName) { 
    console.log("hey here "+eventName); 
    this.toastr.success(eventName); 
    } 
} 

Erreur:
[Cette erreur est renvoyée après la sortie de console.log]

EXCEPTION: Error in ./EventListComponent class EventListComponent - inline template:6:16 caused by: Cannot read property 'extend' of undefined. ORIGINAL EXCEPTION: Cannot read property 'extend' of undefined
TypeError: Cannot read property 'extend' of undefined at m (toastr.js:411) at Object.s [as success] (toastr.js:85) at ToastrService.success (toastr.service.ts:12)

+0

Qu'est-ce que ToastrService? –

+0

C'est comme si nous codions la même chose - j'allais justement demander: D – Leo

+1

Avez-vous inclus JQuery? – kemsky

Répondre

18

Ajouter ce script src="node_modules/toastr/build/toastr.min.js"

Après cette script src="node_modules/jquery/dist/jquery.min.js"></script>

Raison: toastr.js utilise jQuery, donc jQuery devrait être chargé avant toastr.js