Блог

Главная - Вопросы по программированию - Angular не может найти свойство undefined

Angular не может найти свойство undefined

#angular #typescript

#angular #машинописный текст

Вопрос:

Я относительно новичок в Angular, и у меня возникли проблемы с использованием сервиса для возврата одного значения. Вот соответствующий код:

Предполагается, что этот компонент извлекает данные из определенной команды, хранящиеся в файле .json, который включает данные для нескольких команд.

 import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { StandingsService } from '../standings/standings.service';
import { IStanding } from '../standings/standing';

@Component({
  selector: 'ur-teams',
  templateUrl: './teams.component.html',
  styleUrls: ['./teams.component.css']
})
export class TeamsComponent implements OnInit {
  teamName; currAge; currDiv; 
  currTeam: IStanding;
  errorMessage: '';

  constructor(private route: ActivatedRoute,
    private router: Router,
    private standingService: StandingsService) {
  }
  ngOnInit() {
    this.teamName = this.route.snapshot.paramMap.get('team').toLowerCase();
    this.currAge = this.route.snapshot.paramMap.get('age').toLowerCase();
    this.currDiv = this.route.snapshot.paramMap.get('division').toLowerCase();
    this.getTeam(this.currAge, this.currDiv, this.teamName);
  }
  getTeam(age: string, gender: string, teamName: string): void {
    this.standingService.getTeam(age, gender, teamName).subscribe({
      next: team => this.currTeam = team,
      error: err => this.errorMessage = err
    });
  }

Это служба , которая получает данные из .файл json:

 import { Injectable } from '@angular/core';
import { IStanding } from './standing';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';

@Injectable({
    providedIn: 'root'
})
export class StandingsService {
    private standingsUrl = 'api/standings/';
    private newUrl;
    allTeams;
    team;
    team_pipe;
    constructor(private http: HttpClient){}

    getStandings(ageDivison: string, gendDivision: string): Observable<IStanding[]> {
        this.newUrl = this.standingsUrl   ageDivison   '/'   gendDivision   '.json';
        return this.http.get<IStanding[]>(this.newUrl).
            pipe(
                tap(data => console.log('All: '   JSON.stringify(data))),
                catchError(this.handleError)
            ); 
    }
    getTeam(age: string, gender: string, teamName: string): Observable<IStanding | undefined>{
        return this.getStandings(age, gender)
            .pipe(
                map((standings: IStanding[]) => standings.find(
                    t => t.teamName.toLowerCase() === teamName.toLowerCase()))
            );
    }
    private handleError(err: HttpErrorResponse){
        let errorMessage = '';
        if (err.error instanceof ErrorEvent) {
          errorMessage = `An error occurred: ${err.error.message}`;
        } else {
          errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`
        }
        console.error(errorMessage);
        return throwError(errorMessage);
    }
}

и это HTML-код, который отображается в соответствии с компонентом teams:

 <table class="table table-bordered table-striped table-hover">
    <thead class="thead">
        <tr><th class="text-center" id="borderless-cell" colspan="4">{{teamName}}</th></tr>
    </thead>
    <thead class="thead-dark">
        <tr>
            <th mat-sort-header="rank">Rank</th>
            <th mat-sort-header="teamName">Team</th>
            <th mat-sort-header="powerRanking">PR</th>
            <th mat-sort-header="region">Region</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>FIX</td>
            <td><a routerLinkActive='active' [routerLink]="['/teams']">{{currTeam.teamName}}</a></td>
            <td>{{currTeam.powerRanking}}</td>
            <td>{{currTeam.region}}</td>
        </tr>
    </tbody>
</table>
<table class="table table-bordered table-striped table-hover">
    <thead class="thead">
        <tr><th class="text-center" id="borderless-cell" colspan="5">Current Season Tournaments</th></tr>
    </thead>
    <thead class="thead-dark">
        <tr>
            <th mat-sort-header="rank">Seed</th>
            <th mat-sort-header="teamName">Finish</th>
            <th mat-sort-header="powerRanking">W</th>
            <th mat-sort-header="region">L</th>
            <th mat-sort-header="region"> /-</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor='let tournament of currTeam.tournaments'>
            <td>FIX</td>
            <td><a routerLinkActive='active' [routerLink]="['/teams']">{{currTeam.teamName}}</a></td>
            <td>{{currTeam.powerRanking}}</td>
            <td>{{currTeam.region}}</td>
        </tr>
    </tbody>
</table>

Первая таблица фактически печатается с currTeam.TeamName, currTeam.powerRanking и currTeam.region , но если я попытаюсь console.log(this.currTeam) в компоненте teams, он возвращает «undefined». Я также получаю журнал ошибок при загрузке страницы компонента teams с надписью:

ОШИБКА TypeError: не удается прочитать свойство ‘TeamName’ неопределенного значения в TeamsComponent_Template (teams.component.html:16)

наконец, 2-я таблица, которая должна быть заполнена информацией о турнире, пуста. Для справки, вот как выглядит одна команда в файле json:

 {
        "teamName" : "Sockeye",
        "powerRanking": 1000,
        "region": "OV",
        "tournaments":{
            "US Open": {
                "Seed": 1,
                "Finish": 3,
                "Wins": 5,
                "Losses": 2,
                " /-": 23
            },
            "Select Flight Invite": {
                "Seed": 5,
                "Finish": 2,
                "Wins": 6,
                "Losses": 1,
                " /-": 8
            },
            "Three Ring Rally": {
                "Seed": 1,
                "Finish": 1,
                "Wins": 7,
                "Losses": 0,
                " /-": 37
            }
        }
    }

Ответ №1:

Хорошо, я понял, что я делал неправильно — это было несколько вещей.

Во-первых, мне нужно было добавить <div *ngIf='currTeam'> элемент, который обтекает весь teams.component.html . Это исправило все ошибки, которые я видел при загрузке компонента teams.

2-я проблема была связана с тем, как я отформатировал свой файл .json. Все, что мне нужно было сделать, это сделать tournaments раздел массивом, а не вложенным словарем. Теперь это выглядит так:

 "tournaments":[
            {
                "name": "US Open",
                "seed": 1,
                "finish": 3,
                "wins": 5,
                "losses": 2,
                "plus_minus": 23
            },
            {
                "name": "Select Flight Invite",
                "seed": 5,
                "finish": 2,
                "wins": 6,
                "losses": 1,
                "plus_minus": 8
            },
            {
                "name": "US Open",
                "seed": 1,
                "finish": 1,
                "wins": 7,
                "losses": 0,
                "plus_minus": 37
            }
        ]

и это сделало свое дело!

Комментарии:

1. Лучшим решением было бы использовать ng-content в качестве элемента для вашего *ngIf , поскольку это не будет загрязнять Dom ненужными элементами.

Метки: