CODEWITHSUNDEEP
angular
MarinaLaGrande
MarinaLaGrande

Reputation: 171

core.mjs:6484 ERROR TypeError: Cannot read properties of undefined (reading 'name')

In the console.log, I have an error message but I cannot solve this problem...

Here is the error message

core.mjs:6484 ERROR TypeError: Cannot read properties of undefined (reading 'name')

enter image description here

How should I declare name below?

 ...
    <ng-container *ngIf="dta && dta.PP">
 ...

HTML

<ng-container *ngIf="dta && dta.PP  ">
  <div class="card" style="width: 60%">
    <div class="card-body">
      <div class="row">
        <div class="col">
          <table class="table table-hover table-striped spaceLeft">
            <tbody>
              <tr>
                <th>Year</th>
                <td>{{ fiscalYear }}</td>
              </tr>
              <tr>
                <th>Country</th>
                <td>{{ selectedCountry.name }}</td>
              </tr>
              <tr>
                <th>Register</th>
                <td>{{ registreNational }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</ng-container>

TS

selectedCountry: Country;

ngOnInit(): void {
    ...

    this.service.getPaysDta().pipe(
        takeUntil(this.unsubscribe$)
    ).subscribe((countries) => {
        this.countries = countries;

        let selectedCountry = this.countries.find(c => c.id == this.country);
        if (selectedCountry) {
            this.selectedCountry = selectedCountry;
        }
    });

}

Country.ts

export class Country {
    id : string;
    name: string;

}

I don't know how to correctly declare the variable name... :S

Thank you for your help.

Upvotes: 0

Views: 16014

Answers (3)

JGTaylor
JGTaylor

Reputation: 1150

I had a similar problem, but mine was just caused by a silly error on my part. I was loading data in the ngOnInit and assigning it to an Input in the subscribe function(async return). I was then setting a variable to show the component that the data was bound to. I put that variable outside of the subscribe, and it showed the component before the data was done loading. But in the web page it looked like I had just loaded the page perfectly, yet still got a console error. Showing the component from inside of the subscribe fixed my issue.

Upvotes: 0

SAAD BELEFQIH
SAAD BELEFQIH

Reputation: 372

you can fix it by adding '?' before the 'name' property like :

<td>{{ selectedCountry?.name }}</td>

Upvotes: 0

Nathan van Jole
Nathan van Jole

Reputation: 521

The selectedCountry is undefined by default, it only gets assigned a value in the asynchronous getPaysDta() subscribe callback.

In the HTML you string interpolate {{ selectedCountry.name }}. Initially it will try to access the name property of undefined, hence the error message.

You can fix this very easily, by wrapping the string interpolation with an *ngIf.

Example:

<td>
<span *ngIf="selectedCountry">{{ selectedCountry.name }}</span>
</td>

Upvotes: 2

Related Questions