typescript - TypeError : self. parent.parent.parent.context 不是函数 Angular 2

Question

我创建了这个函数来保存我的taches

sauverTache(tache:Tache){

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

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

我这样在模板中调用我的函数

<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>

我得到了这个错误

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

Answer 1

获取事件发出的参数的方式只是通过关键字$event:

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

如果你需要来自某个迭代数组的参数，你也可以传递它

<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>

如果我们需要组件类的一些设置，我们也可以

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

现在我们可以要求像原始片段一样传递它

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

简单地说，我们要么需要让 myTache 成为一个局部变量(通常是 ngFor 的一部分)，要么让我们的组件成为一个属性。如果我们需要使用事件参数——我们应该请求 $event

延长

最大的问题是在 sauverTache 内部，我们要在其中发出一些数据。这必须在 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);
  }

有a working plunker