変数に値を代入する事ができない

Question

TypeScript初心者です…すみません教えてください。
前回こちらで質問させて頂き、外部クラスからコールバック関数を用いてresultを取得するところまでは実装することができたのですが肝心なそのresultを変数であるthis.namesに代入する事ができずに困っています…。

デバッグでは直前のconsole.logで確実に配列３つ取得できています。しかし、いざその配列をThis.namesに代入しようとすると、HTMLブラウザではERROR TypeError: "this is undefined"となってしまい何も表示されません…。

[直前では確実に配列が取得できている]

[しかし、エラーにより代入できず]

■ App.Component.ts

import { Component } from '@angular/core';
import { Name } from './name';
import { MyDB } from './mydb';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  constructor(private MyDB: MyDB) {
    this.MyDB.Get(function (result: Name[]) {
      console.log(result)
      this.names = result // ← うまく代入できない
    });
  }
}

■ App.Component.html

<div *ngIf="names">
  <div *ngFor="let name of names">
    <p>{{name.id}}: {{name.name}}</p>
  </div>
</div>

いろいろ試行錯誤していますが、自力で解決できず…。
どのようにすればhtmlに表示することができるでしょうか？
可能であればわかりやすく説明して頂けると嬉しいです。
大変お手数ですがどなたかご教示くださいませ＞＜；

Answer 1

export class AppComponent {
  constructor(private MyDB: MyDB) {
    this.MyDB.Get(function (result: Name[]) {  // ★１
      console.log(result)
      this.names = result // ← うまく代入できない// ★2
    });
  }
}

★1と★2でthisを使用していますが、★2のthisは★1と違いundefinedです。

理由を知るにはjavascriptにおけるthisを理解する必要がありますが
ここで説明するのはかなり大変なので以下の記事などを参考にthisとは何かを理解してください。

JavaScript の this を理解する多分一番分かりやすい説明

解決方法は色々ありますが、最も簡単な解決策はアロー関数に変更する事です。

export class AppComponent {
  constructor(private MyDB: MyDB) {
    this.MyDB.Get((result: Name[]) => {  // ★3 ここをアロー関数にする
      console.log(result)
      this.names = result // ← うまく代入できない
    });
  }
}

Comments

[inukujira]

_hiroさん！返信が遅くなり大変申し訳ありませんでした！
この回答で問題なく解決いたしました事をご報告いたします。

本当にありがとうございました！感謝です！＞＜；