"TypeError: this is undefined" while accessing private metod

Question

在 Ionic 组件中，我使用了令人惊叹的 <ion-virtual-scroll> 标签。为了拆分列表中的项目，header 函数令人惊叹。现在，分离这段代码，我将它的一部分提取到私有函数 sameGroup 中。虽然 returns TypeError: this is undefined 当我想从 myHeaderFn 函数调用它时。为什么？

（是的，我知道，我可以很容易地将那个函数代码插入 myHeaderFn。但这不是问题。）

@Component({
  selector: 'app-stash',
  templateUrl: './stash.page.html',
  styleUrls: ['./stash.page.scss'],
})
export class StashPage implements OnInit {

  public translations: Translation[];

  constructor(private translationService: TranslationService) { }

  ngOnInit() {
    this.translations = this.translationService.getAllTranslationsSorted('de', 'ar');
  }

  myHeaderFn(record, recordIndex, records) {
    if (**this.sameGroup(recordIndex, records)**) {
      return null;
    } else {
      return record['term'].substring(0, 1);
    }
  }

  private sameGroup(i, records) {
    if (i === 0) {
      return false;
    } else {
      const prevRecInitLet = records[i - 1]['term'].substring(0, 1);
      const currRecInitLet = records[i]['term'].substring(0, 1);
      return prevRecInitLet === currRecInitLet ? true : false;
    }
  }

}

myHeaderFn 由离子组件 ion-virtual-scroll 调用。

 <ion-virtual-scroll [items]="translations" [headerFn]="myHeaderFn">
        <ion-item-divider *virtualHeader="let header">
            {{ header }}
        </ion-item-divider>

        <!-- need to wrap this into the div, so that *virtualItem is not part of the component -->
        <div *virtualItem="let trans">
            <!-- translation (not translations) referes to the model of the component -->
            <app-transitem [translation]=trans></app-transitem>
        </div>

    </ion-virtual-scroll>

Answer 1

您需要使用箭头功能。

  myHeaderFn = (record, recordIndex, records) => {
    if (this.sameGroup(recordIndex, records)) {
      return null;
    } else {
      return record['term'].substring(0, 1);
    }
  }

Arrow functions do not have their own this value. The value of this inside an arrow function is always inherited from the enclosing scope.

https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/

"TypeError: this is undefined" while accessing private metod

"TypeError: this is undefined" while accessing private metod

javascript

typescript

angular

ionic4