How to resolve, Angular: ERROR TypeError: Cannot read property 'name' of undefined

Question

I have the following errors :

SingleUserComponent.html:13 ERROR TypeError: Cannot read property 'name' of undefined at Object.eval [as updateDirectives] (SingleUserComponent.html:30) at Object.debugUpdateDirectives [as updateDirectives] (core.js:10750)

here are my codes :

model.ts

    import {User} from './user';
    export class Wallet {
    id: number;
    pname: string;
    puser: User;
    constructor(public name: string, public user: User) {
    this.pname = name;
    this.puser = user;
    }
    }

single-user-component.html

<div class="row">
  <div class="container">
    <div class="panel-primary">
      <h1 class="panel panel-heading">
        {{user.name}}

        <button class="btn btn-default pull-right" (click)="addWallet()">
          <span class="glyphicon glyphicon-plus"></span>
        </button>
      </h1>
      <div class="panel-body">
        <ul class="list-group-item">
          <li *ngFor="let wallet of user.wallets" style="list-style: none">
            <h3>
              {{wallet.name}}
              <button class="btn btn-sucess  pull-right" 
          (click)="deleteWallet()">
                <span class="glyphicon glyphicon-minus"></span>
              </button>
            </h3>
          </li>
        </ul>
    </div>

      <div class="form-group spacer">
      </div>
      <div class="form-group">
        <h3>Create new Wallet</h3>
        <form>
          <input type = "text" name = "walletName"
                 [(ngModel)] = "createdWallet.name" (click) = 
         "createdWallet.name = '' ">
          <button type="button" class="btn btn-success" 
        (click)="createWallets(user.id)" [disabled] = 
         "createdWallet.name?.length < 2">Add a new Wallet</button>
        </form>
      </div>
       <!-- <label for="name">
          Please choose a new Wallet !
        </label>-->
         <!-- <input id="name" class="form-control" 
        [(ngModel)]=selectedWallet.name>
         <button type="button" class="btn btn-success" 
       (click)="onAddWallet()">Add a new Wallet</button>
      </div>-->

          <!--  <select id="name" class="form-control btn" name="name" 
         [(ngModel)] = selectedWallet (click)="onSelectWallet()" >
              <option *ngFor="let wallet of wallets">{{wallet.name}}</option>
            </select>
          </label>

          <div *ngIf="selectedWallet">

            <li>{{selectedWallet}}</li>
          </div>-->
          <!-- <input  type="text" id="name" class="form-control" name="name" 
         ngModel="" required>-->


    <button class="btn btn-default spacer" (click)="onBack()">Back</button>
  </div>
</div>

single-user-component.ts

import {User} from '../../models/user';
import {ActivatedRoute, Router} from '@angular/router';
import {DataService} from '../../services/data.service';
import {Wallet} from '../../models/wallet';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'app-single-user',
  templateUrl: './single-user.component.html',
  styleUrls: ['./single-user.component.css']
})
export class SingleUserComponent implements OnInit {

  user: User;
  users: User[];
 // users: User = new User();
  wallets: Wallet[] ;
  wallet: Wallet;
  selectedWallet: Wallet;
  createdWallet: Wallet;


  constructor(private route: ActivatedRoute,
              private dataService: DataService,
              private router: Router) { }

  ngOnInit() {
    this.user = new User();
    // Recuperation de l'identifiant depuis l'url
    const id = this.route.snapshot.params['id'];
    this.dataService.getUserWithWallets(+id).subscribe(
      (user: User) => {
        console.log('user: ', user);
        this.user = user;
      }
    );

    this.getWallets();
  }

  addWallet() {
    this.router.navigate(['/wallets']);
  }

  deleteWallet(id: number) {
    this.dataService.deleteWallet(id).subscribe(
      (wallet: Wallet) => {
        this.wallet = wallet;
      }
    );
  }

  getWallets(): any {
    this.dataService.getWallets().subscribe(
      (wallets: Wallet[]) => {
        console.log('wallets: ', wallets);
        this.wallets = wallets;
        return this.wallets;
      }
    );
  }

  onAddWallet() {

   // this.createWallets();
    this.user.wallets.push(this.selectedWallet);

    console.log('user', this.user);

   //this.wallets.push(this.selectedWallet);
    console.log('selectedWallet: ', this.selectedWallet);
    console.log('this.user.wallet', this.user.wallets);
     //if (wallet) {
    //   this.user.wallets.push(this.selectedWallet);
    // }

   // this.user.wallets.push(this.selectedWallet);

  }

  createWallets() {
    this.dataService.createWallet(this.createdWallet).subscribe(
      (data: Wallet) => {
        this.wallet.name = data.name;
        this.wallet.user = data.user;
        this.createdWallet =  new Wallet(this.wallet.name, this.wallet.user);
        this.user.wallets.push(this.createdWallet) ;
    }
    );
  }



  onBack() {
    this.router.navigate(['/users']);
  }

}

Thank you for your answers!!!!! :)

Answer 1

Looking at your error message you must add the elvis operator somewhere here (line 30), don't overlook any.

https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths

<form>
  <input type = "text" name="walletName"
         [(ngModel)]="createdWallet?.name" 
         (click)="createdWallet?.name = '' "
  >
  <button type="button" class="btn btn-success" 
          (click)="createWallets(user.id)" 
          [disabled]="createdWallet?.name?.length < 2">
            Add a new Wallet
  </button>
</form>

Either this or you wrap an ngIf around all containers which use the variable:

 <li *ngFor="let wallet of user.wallets" style="list-style: none">
     <ng-container *ngIf="wallet">
        <h3>
          {{wallet.name}}
          <button class="btn btn-sucess  pull-right" (click)="deleteWallet()">
            <span class="glyphicon glyphicon-minus"></span>
          </button>
        </h3>
      <ng-container>
    </li>

(ng-container does template logic without actually rendering in the DOM)

Another (ugly) option would be to initialize all variables empty but I suggest you find the forgotten template variable.

You can also get values in the template directly from an observable using async pipe, which should also eliminate the error.

Also I just realized you have spaces in your HTML between atributes and their values

e.g. name = "walletName" should be name="walletName"

Better clean up your code. The HTML above should solve the problem.

Making crypto wallets? ;)

Answer 2

As i see, you are requesting the data from api which returns the data synchronously, you could use the safe navigation operator or ngIf to handle this as follows,

{{user?.name}}