title: Angular 9 :core.js:6228 ERROR TypeError: Cannot read property 'name' of undefined
body: <p>I'm devopping a Dapp. I'm using Angular 9 for the frontend.<br>
  I get this error: ERROR TypeError: Cannot read property 'name' of undefined.
  <br>
  My code is
  <br>
  app.component.ts</p>
  
  <pre><code>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);}
        });
      }
  }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;div style="text-align:center"&gt;
    &lt;h1&gt;
      Liste des donations :{{typeDons.length}}
    &lt;/h1&gt;
  &lt;/div&gt;
    &lt;table&gt;
       &lt;thead&gt;
          &lt;tr&gt;
             &lt;th&gt;Name&lt;/th&gt;
             &lt;th&gt;Description&lt;/th&gt;
             &lt;th&gt;Action&lt;/th&gt;
          &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;tbody&gt;
  
          &lt;tr ngFor="let item of typeDons"&gt;
             &lt;td&gt;{{ item.name }}&lt;/td&gt;
             &lt;td&gt;{{ item.description }}&lt;/td&gt;
             &lt;td&gt;
                &lt;button type="button" &gt;Edit&lt;/button&gt;
                &lt;button type="button" &gt;Delete&lt;/button&gt;
             &lt;/td&gt;
          &lt;/tr&gt;
       &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>I console.log the content of the table result and it contains data.<br>
  I think that the error comes from the html.<br>
  Any ideas to fix the problem</p>