javascript - Angular: ERROR TypeError: Cannot read property ___ of undefined - Stack Overflow

admin管理员组

文章数量:1350017

I'm getting these errors even though the values renders in the browser. I'm not sure how to fix this.

ERROR TypeError: Cannot read property 'length' of undefined

ERROR TypeError: Cannot read property 'FirstName' of undefined

Component.ts:

teams: Team[];

ngOnInit() {
  this.getTeams();
}

constructor(private m: DataManagerService, private router: Router) { 
}

getTeams(): void {
  this.m.getTeams().subscribe(teams => this.teams = teams);
}

select(em: Team){
  this.router.navigate(['/teamView',em._id]);
}

Component.html:

<div class="panel-body">
  <table class="table table-striped">
    <tr>
      <th>Team name</th>
      <th>Name of Team Leader</th>
    </tr>
    <tr *ngFor='let team of teams' (click)="select(team)">
      <td>{{team.TeamName}}</td>
      <td>{{team.TeamLead.FirstName}} {{team.TeamLead.LastName}}</td>
    </tr>
  </table>
  <hr>
</div>

Team.ts:

export class Team {
    _id: string;
    TeamName: string;
    TeamLead: Employee;
    Projects:{};
    Employees: {};
}

Object:

DataManagerService.ts

teams: Team[];
projects: Project[];
employees: Employee[];

constructor(private http: HttpClient) { 
}

getTeams(): Observable<Team[]> {
    return this.http.get<Team[]>(`${this.url}/teams`)
  }

getProjects(): Observable<Project[]> {
    return this.http.get<Project[]>(`${this.url}/projects`)
}

getEmployees(): Observable<Employee[]> {
    return this.http.get<Employee[]>(`${this.url}/employees`)
}

I'm getting these errors even though the values renders in the browser. I'm not sure how to fix this.

ERROR TypeError: Cannot read property 'length' of undefined

ERROR TypeError: Cannot read property 'FirstName' of undefined

Component.ts:

teams: Team[];

ngOnInit() {
  this.getTeams();
}

constructor(private m: DataManagerService, private router: Router) { 
}

getTeams(): void {
  this.m.getTeams().subscribe(teams => this.teams = teams);
}

select(em: Team){
  this.router.navigate(['/teamView',em._id]);
}

Component.html:

<div class="panel-body">
  <table class="table table-striped">
    <tr>
      <th>Team name</th>
      <th>Name of Team Leader</th>
    </tr>
    <tr *ngFor='let team of teams' (click)="select(team)">
      <td>{{team.TeamName}}</td>
      <td>{{team.TeamLead.FirstName}} {{team.TeamLead.LastName}}</td>
    </tr>
  </table>
  <hr>
</div>

Team.ts:

export class Team {
    _id: string;
    TeamName: string;
    TeamLead: Employee;
    Projects:{};
    Employees: {};
}

Object:

https://lit-coast-73093.herokuapp./teams

DataManagerService.ts

teams: Team[];
projects: Project[];
employees: Employee[];

constructor(private http: HttpClient) { 
}

getTeams(): Observable<Team[]> {
    return this.http.get<Team[]>(`${this.url}/teams`)
  }

getProjects(): Observable<Project[]> {
    return this.http.get<Project[]>(`${this.url}/projects`)
}

getEmployees(): Observable<Employee[]> {
    return this.http.get<Employee[]>(`${this.url}/employees`)
}

• javascript
• html
• angular

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Apr 8, 2018 at 20:10 John CJohn C 51722 gold badges66 silver badges1616 bronze badges 4

• 1 .length was just getting the size of the object. It works if I remove <td>{{team.TeamLead.FirstName}} {{team.TeamLead.LastName}}</td> – John C Commented Apr 8, 2018 at 20:36
• @John C : can you edit and add the code for select(team) to your question ? – HDJEMAI Commented Apr 8, 2018 at 20:37
• @HDJEMAI select(team) is in ponent.ts – John C Commented Apr 8, 2018 at 20:39
• What is the content of Project class. – HDJEMAI Commented Apr 8, 2018 at 21:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Because teams is probably not yet available,

you can try this way:

<div class="panel-body">
  <table class="table table-striped">
    <tr>
      <th>Team name</th>
      <th>Name of Team Leader</th>
    </tr>
    <tr *ngFor='let team of teams' (click)="select(team)">
      <td>{{team.TeamName}}</td>
      <td>{{team.TeamLead?.FirstName}} {{team.TeamLead?.LastName}}</td>
    </tr>
  </table>
  <hr>
</div>

Working demo:

https://stackblitz./edit/angular-tutorial-2yzwuu?file=app%2Fapp.ponent.html

<tr *ngIf='teams.length > 0' *ngFor='let team of teams' (click)="select(team)">
  <td>{{team?.TeamName}}</td>
  <td>{{team?.TeamLead?.FirstName}} {{team?.TeamLead?.LastName}}</td>
</tr>

Possibilities : a) Teams object hasn't been populated yet. Hence there is nothing to iterate over b) Your API response doesn't have all the expected properties.

Adding checks like I suggested above should fix your problem. LMK if I can explain further.

本文标签： javascriptAngular ERROR TypeError Cannot read propertyof undefinedStack Overflow