*ngFor displaying data buy keep showing 'undefined' errors

Question

I'm new to angular

I have an *ngFor directive that is functioning and displaying data in my browser as expected. Although my console in chrome is showing 'undefined' errors.

classe :

export class Matchlist {

    matches?: (MatchesEntity)[] | null;
    endIndex: number;
    startIndex: number;
    totalGames: number;




}



  export class MatchesEntity {
    lane: string;
    gameId: number;
    champion: number;
    platformId: string;
    timestamp: number;
    queue: number;
    role: string;
    season: number;
    Matchinfo : Match;
  }


  export class Match {
    seasonId: number;
    queueId: number;
    gameId: number;
    participantIdentities?: (ParticipantIdentitiesEntity)[] | null;
    gameVersion: string;
    platformId: string;
    gameMode: string;
    mapId: number;
    gameType: string;
    teams?: (TeamsEntity)[] | null;
    participants?: (ParticipantsEntity)[] | null;
    gameDuration: number;
    gameCreation: number;
  }
  export class ParticipantIdentitiesEntity {
    player: Player;
    participantId: number;
  }
  export class Player {
    currentPlatformId: string;
    summonerName: string;
    matchHistoryUri: string;
    platformId: string;
    currentAccountId: string;
    profileIcon: number;
    summonerId: string;
    accountId: string;
  }
  export class TeamsEntity {
    firstDragon: boolean;
    bans?: (BansEntity)[] | null;
    firstInhibitor: boolean;
    win: string;
    firstRiftHerald: boolean;
    firstBaron: boolean;
    baronKills: number;
    riftHeraldKills: number;
    firstBlood: boolean;
    teamId: number;
    firstTower: boolean;
    vilemawKills: number;
    inhibitorKills: number;
    towerKills: number;
    dominionVictoryScore: number;
    dragonKills: number;
  }
  export class BansEntity {
    pickTurn: number;
    championId: number;
  }
  export class ParticipantsEntity {
    spell1Id: number;
    participantId: number;

    spell2Id: number;
    teamId: number;
    stats: Stats;
    championId: number;
  }

  export class Stats {
    neutralMinionsKilledTeamJungle: number;
    visionScore: number;
    magicDamageDealtToChampions: number;
    largestMultiKill: number;
    totalTimeCrowdControlDealt: number;
    longestTimeSpentLiving: number;
    perk1Var1: number;
    perk1Var3: number;
    perk1Var2: number;
    tripleKills: number;
    perk5: number;
    perk4: number;
    playerScore9: number;
    playerScore8: number;
    kills: number;
    playerScore1: number;
    playerScore0: number;
    playerScore3: number;
    playerScore2: number;
    playerScore5: number;
    playerScore4: number;
    playerScore7: number;
    playerScore6: number;
    perk5Var1: number;
    perk5Var3: number;
    perk5Var2: number;
    totalScoreRank: number;
    neutralMinionsKilled: number;
    statPerk1: number;
    statPerk0: number;
    damageDealtToTurrets: number;
    physicalDamageDealtToChampions: number;
    damageDealtToObjectives: number;
    perk2Var2: number;
    perk2Var3: number;
    totalUnitsHealed: number;
    perk2Var1: number;
    perk4Var1: number;
    totalDamageTaken: number;
    perk4Var3: number;
    wardsKilled: number;
    largestCriticalStrike: number;
    largestKillingSpree: number;
    quadraKills: number;
    magicDamageDealt: number;
    firstBloodAssist: boolean;
    item2: number;
    item3: number;
    item0: number;
    item1: number;
    item6: number;
    item4: number;
    item5: number;
    perk1: number;
    perk0: number;
    perk3: number;
    perk2: number;
    perk3Var3: number;
    perk3Var2: number;
    perk3Var1: number;
    damageSelfMitigated: number;
    magicalDamageTaken: number;
    perk0Var2: number;
    firstInhibitorKill: boolean;
    trueDamageTaken: number;
    assists: number;
    perk4Var2: number;
    goldSpent: number;
    trueDamageDealt: number;
    participantId: number;
    physicalDamageDealt: number;
    sightWardsBoughtInGame: number;
    totalDamageDealtToChampions: number;
    physicalDamageTaken: number;
    totalPlayerScore: number;
    win: boolean;
    objectivePlayerScore: number;
    totalDamageDealt: number;
    neutralMinionsKilledEnemyJungle: number;
    deaths: number;
    wardsPlaced: number;
    perkPrimaryStyle: number;
    perkSubStyle: number;
    turretKills: number;
    firstBloodKill: boolean;
    trueDamageDealtToChampions: number;
    goldEarned: number;
    killingSprees: number;
    unrealKills: number;
    firstTowerAssist: boolean;
    firstTowerKill: boolean;
    champLevel: number;
    doubleKills: number;
    inhibitorKills: number;
    firstInhibitorAssist: boolean;
    perk0Var1: number;
    combatPlayerScore: number;
    perk0Var3: number;
    visionWardsBoughtInGame: number;
    pentaKills: number;
    totalHeal: number;
    totalMinionsKilled: number;
    timeCCingOthers: number;
    statPerk2: number;
  }

component:

import { Component, OnInit, getDebugNode } from '@angular/core';
import { BaseService } from './../../services/base.service';
import { LeagueService } from './../../services/league.service';
import { MatchlistService } from './../../services/matchlist.service';
import { MatchService } from './../../services/match.service';
import { Account } from 'src/app/models/accounts';
import { League } from 'src/app/models/league';
import { Matchlist } from 'src/app/models/matchlist';
import { Match } from 'src/app/models/match';

@Component({
    selector: 'app-profil',
    templateUrl: './profil.component.html',
    styleUrls: ['./profil.component.css']
})
export class ProfilComponent implements OnInit {
    account = <Account>{};
    leagues = <League[]>[];
    Matchlists = <Matchlist>{};
    Match = <Match>{};
    timeLeft: number = 60;
    accountid: string;

    constructor(private baseService: BaseService, private leagueService: LeagueService
        , private matchlistService: MatchlistService, private matchService: MatchService) {
        LeagueService

    }

    ngOnInit() {
        this.baseService.Getinfo("capman").subscribe((data: Account) => {
            console.log(data);
            this.account = data;
            this.accountid = data.accountId;
            this.leagueService.Getleaugue(data.id).subscribe((leauguedata: League[]) => {
                this.leagues = leauguedata;
                this.leagues = this.leagues.filter(item => item.queueType !== "RANKED_TFT" && item.queueType !== "RANKED_FLEX_TT");
                this.leagues = this.leagues.sort((b, a) => a.queueType.localeCompare(b.queueType));
                //    console.log("account id " + JSON.stringify(this.leagues) );
            })
            this.matchlistService.Getmatchlist(this.accountid, 0, 5).subscribe((Matchlistdata: Matchlist) => {
                console.log(Matchlistdata);
                this.Matchlists = Matchlistdata;
                this.Matchlists.matches.forEach(va => {
                    this.matchService.GetMatch(va.gameId).subscribe((Matchinfodata: Match) => {
                        va.Matchinfo = Matchinfodata;
                        console.log(this.accountid);
                    })
                });
            })
        })
    }
}

html :

<div class="match1" *ngFor="let arg of Matchlists.matches" style="margin-top: 40px;" >
    <div *ngFor="let part of arg.Matchinfo.participantIdentities">

            <div *ngIf="part.player.accountId == accountid">



        {{Matchlist.Matchinfo.participants[part.participantId-1].spell1Id  | summonerSpell     }}
        {{Matchlist.Matchinfo.participants[part.participantId-1].spell2Id   | summonerSpell        }}       
        {{Matchlist.Matchinfo.gameId       }}   
        {{Matchlist.Matchinfo.participants[part.participantId-1].championId | championname }}

            </div>
            </div>
        </div>

Error: ERROR TypeError: Cannot read property 'participantIdentities' of undefined

enter code here

Thanks in advance

Answer 1

you can just use safe navigation operator ?.

<div class="match1" *ngFor="let arg of Matchlists.matches" style="margin-top: 40px;" >
  <div *ngFor="let part of arg.Matchinfo?.participantIdentities"> 👈
      <div *ngIf="part.player.accountId == accountid">
      </div>
   </div>
</div>

safe navigation operator ( ? ) and null property paths

Answer 2

use ng-container as a wrapper of your ngFor to avoid that

<ng-container *ngIf="arg.Matchinfo">
  <div *ngFor="let part of arg.Matchinfo.participantIdentities">
   ...
  </div>
<ng-container>