TypeError: self.parent.parent.parent.context is not a function Angular 2

Question

I've created this function to save my taches

sauverTache(tache:Tache){

    this.editionEnCours = true;
    tache.estReelle = true;

    this.sauverTache.emit(tache.id);
}

I call my function in the template like this

<div class="sbold tr" *ngFor="let tache of etapes.P0.taches, let i=index" [class.hidden]="!afficheTaches" >
                                        <td  align="right">{{tache.typeTache}}&nbsp;</td>
                                        <td>
                                            <div>
                                               <p-calendar [(ngModel)]="etapes.P0.taches[i].dateTache"  showAnim="slideDown" [class.hidden]="!editP0[i]" dateFormat="dd/mm/yy" placeholder="jj/mm/aaaa"></p-calendar>
                                                <div class="btn btn-circle btn-default font-yellow-saffron" *ngIf="!editP0[i]" (click)="editP0[i]=!editP0[i]">
                                                    <i class="fa fa-pencil "> </i>
                                                </div>
                                                <div class="btn btn-circle btn-default font-green-jungle" *ngIf="editP0[i]" (click)="editP0[i]=!editP0[i]; sauverTache(etapes.P0.taches[i]);">
                                                    <i class="fa fa-check "> </i>
                                                </div>
                                                <div class="btn btn-circle btn-default font-red" *ngIf="editP0[i]" (click)="editP0[i]=!editP0[i]; reset();">
                                                    <i class="fa fa-remove "> </i>
                                                </div>
                                            </div>
                                        </td>
  </div>

and I got this error

TypeError: self.parent.parent.parent.context.sauverTache is not a function

Radim Köhler · Accepted Answer · 2016-06-03 13:17:37Z

5

The way how to get to argument emitted by the event is just via keyword $event:

//(click)="edit=!edit; sauverTache(myTache);"
(click)="edit=!edit; sauverTache($event);"

In case you need the parameter coming from some iterated array, you can pass it as well

<div *ngFor="let myTache of Taches">
  ...
  <div class="btn btn-circle btn-default font-green-jungle" 
     *ngIf="edit" (click)="edit=!edit; sauverTache(myTache);">
   <i class="fa fa-check "> </i>
  </div>
  ...
</div>

And in case that we need some setting from our component class, we can also

class MyComponent {
    public myTache: number;
    ngOnInit() {
       this.myTache = 1;
    }
}

and now we can ask for that to be passed as in original snippet

(click)="edit=!edit; sauverTache(myTache);

Simply, we either need to have myTache to be a local variable (usually part of ngFor) or a property on our component. If we need to consume events arguments - we should ask for $event

EXTEND

The biggest issue is inside of the sauverTache, where we want to emit some data. That must be done with a help of EventEmitter:

  sauverTacheObservable = new EventEmitter();

  sauverTache(tache: Tache){

    this.editionEnCours = true;
    tache.estReelle = true;

    // this is self calling.. and causing problem...
    // this method does not have method emit
    //this.sauverTache.emit(tache.id);

    // but now, we call proper emitter
    this.sauverTacheObservable.emit(tache.id);
    console.log(tache.id);
  }

There is a working plunker

edited Jun 3, 2016 at 13:17

answered Jun 3, 2016 at 12:25

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Naella Over a year ago

Thanks for your answer. But how can I specify to the function which tache I want to save?

Naella Over a year ago

I'm exactly working with a *ngFor="let myTache of Taches", and Taches= Array<Tache>; defined in my component. I can't see how can I use $event in this case?

Radim Köhler Over a year ago

I found your issue, extended answer, created plunker and added more details. We need to call Emitter not the function itself

Radim Köhler Over a year ago

Yes.. and there you can consume fired parameter with sauverTache)="sauverPlannings($event)" and in the code of sauverPlannings(myTacheId) you will consume that id... hope it helps a bit ;)

Naella Over a year ago

Thanks for the plunker. But I'm using my component in an other template, like this

<my-component                                    [projet]="projet"                                    (sauverTache)="sauverPlannings()">                              </my-component>

. Should I replace sauverPlannings() by sauverPlannings($event)?

|

Collectives™ on Stack Overflow

TypeError: self.parent.parent.parent.context is not a function Angular 2

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related