Angular 9: ядро. js: 6228 ОШИБКА TypeError: невозможно прочесть свойство «имя» неопределенного

Question

Осваиваю дапп. Я использую Angular 9 для внешнего интерфейса.
Я получаю эту ошибку: ERROR TypeError: не удается прочитать свойство «name» неопределенного значения.
Мой код:
app.component.ts

import { Component, OnInit } from '@angular/core';
import * as Donation from '../../Donation.json';
import { TypeDon } from './interfaces/TypeDon.js';
'use strict';
var Web3 = require('web3');
var DonationABI = Donation.abi;

const web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:22000'));
const donationContract =  new web3.eth.Contract(DonationABI, '0xd0a5685a4ba479D0FF4E86Ca8300738573816c63');
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    this.getAllTypes();
  }
  title = 'donationApp';

typeDons : TypeDon[]=[];
 getAllTypes(){
  donationContract.handleRevert=true; 
  donationContract.methods.getAllTypeDon().call(function(error, result){
    console.log("resultat :" + result);
    if(!error){      
      if(result!=null) {
           this.typeDons=result;
         }
        } 
      } else if(error)
        { console.log("error :" + error);}
      });
    }
}

app.component. html

<div style="text-align:center">
  <h1>
    Liste des donations :{{typeDons.length}}
  </h1>
</div>
  <table>
     <thead>
        <tr>
           <th>Name</th>
           <th>Description</th>
           <th>Action</th>
        </tr>
     </thead>
     <tbody>

        <tr ngFor="let item of typeDons">
           <td>{{ item.name }}</td>
           <td>{{ item.description }}</td>
           <td>
              <button type="button" >Edit</button>
              <button type="button" >Delete</button>
           </td>
        </tr>
     </tbody>
  </table>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    FormsModule,
    AppRoutingModule,
    BrowserModule, 
    HttpClientModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Я console.log содержимое таблицы результат, и он содержит данные.
Я думаю, что ошибка исходит из html.
Любые идеи по устранению проблемы

Answer 1

1. Значение ключевого слова this в обратном вызове, определенном с помощью ключевого слова function, обозначает область действия функции. Используйте функцию стрелки, чтобы использовать переменные-члены класса.

getAllTypes() {
  donationContract.handleRevert = true;
  donationContract.methods.getAllTypeDon().call((error, result) => {      // <-- use arrow function here
    console.log("resultat :" + result);
    if(!error) {
      if(result!=null) {
        this.typeDons=result;
      }
    } else { 
      console.log("error :" + error);
    }
  });
}

Используйте оператор безопасной навигации ?. в шаблоне, чтобы проверить, определен ли объект, прежде чем пытаться получить доступ к его свойствам.

<tr ngFor="let item of typeDons">
  <td>{{ item?.name }}</td>               <!-- notice the question mark -->
  <td>{{ item?.description }}</td>
  <td>
    <button type="button" >Edit</button>
    <button type="button" >Delete</button>
  </td>
</tr>

Answer 2

Добавление <router-outlet></router-outlet> в html решает проблему для меня.