Наличие этой ошибки при отображении списка данных в Angular => ОШИБКА: TypeError: Невозможно прочитать свойство '0' из неопределенного

Question

Я новичок в Angular, и мне нужно исправить ошибку. Это ошибка, с которой я столкнулся при попытке отобразить список данных из jsonplaceholder. Я не знаю, что не так в коде. Могу ли я попросить о помощи, ребята? Спасибо.

ОШИБКА TypeError: Невозможно прочитать свойство '0' из неопределенного на RecipeService.push ../ src / app / recipes / recipe.service.ts.RecipeService.getRecipe ( recipe.service.ts: 25 ) на SafeSubscriber._next ( recipe-detail.component.ts: 26 ) в SafeSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.SafeSubscriber .__ tryOrUnsub (Subscriber.js: 196) в SafeSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.SafeSubscriber.next (Subscriber.js: 134) на Subscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._next (Subscriber.js: 77) в Subscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.next (Subscriber.js: 54) в BehaviorSubject.push ../ node_modules / rxjs / _esm5 / internal / BehaviorSubject.js.BehaviorSubject._subscribe (BehaviorSubject.js: 22) в BehaviorSubject.push ../ node_modules / rxjs / _esm5 / internal / Observable.js.Observable._trySubscribe (Observable.js: 43) в BehaviorSubject.push ../ node_modules / rxjs / _esm5 / internal / Subject.js.Subject._trySubscribe (Subject.js: 89) в BehaviorSubject.push ../ node_modules / rxjs / _esm5 / internal / Observable.js.Observable.subscribe (Observable.js: 29)

рецепт-detail.component.ts

  ngOnInit() {
    this.route.params
      .subscribe(
        (params: Params) => {
          this.id = +params['id'];
          this.recipe = this.recipeService.getRecipe(this.id);
        }
      );
  }

recipe.service.ts

@Injectable()
export class RecipeService {
  recipesChanged = new Subject<Recipe[]>();

  private url = "https://jsonplaceholder.typicode.com/users/";

  private recipes: Recipe[];

  constructor(private slService: ShoppingListService, private http: Http) {}

  getRecipes() {
    return this.http.get(this.url).pipe(map(res => res.json()));
  }

  getRecipe(index: number) {
    return this.recipes[index];
  }

рецепт-detail.component.html

<div class="row">
  <div class="col-xs-12" *ngFor="let recipe of recipes">
    <h1 class="list-group-item-heading">{{ recipe.id }}</h1>
    <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
    <h4 class="list-group-item-heading">{{ recipe.username }}</h4>
    <h4 class="list-group-item-heading">{{ recipe.email }}</h4>
    <h4 class="list-group-item-heading">{{ recipe.phone }}</h4>
  </div>
</div>

Answer 1

private recipes: Recipe[] здесь не инициализируется. Вы должны проверить undefined и length перед доступом к элементу.

Компонент

getRecipe(index: number) {
    if(this.recipes && this.recipes.length > index){
        return this.recipes[index];
    }else{
       return null;
    }

}

RecipeService

@Injectable()
export class RecipeService {
  recipesChanged = new Subject<Recipe[]>();

  private url = "https://jsonplaceholder.typicode.com/users/";

  private recipes: Recipe[];

  constructor(private slService: ShoppingListService, private http: Http) {
      this.getRecipes().subscribe(recipes=>this.recipes); //<-- you may call from somewhere else.
  }

  getRecipes() {
    return this.http.get(this.url).pipe(map(res => res.json()));
  }

  getRecipe(index: number) {
    return this.recipes[index];
  }

Answer 2

В компоненте вы передаете идентификатор методу getRecipe () сервиса. Но вы не можете быть уверены, что оно существует, поэтому оно происходит. Кроме того, откуда в сервисе берутся «рецепты»? Вы инициализируете его, но никогда не присваиваете ему никакого значения (особенно в виде массива). Т.е. вы вообще не вызываете getRecipes ().

Так измените услугу:

getRecipe(index: number) {
  return this.recipes[index] ? this.recipes[index] : null;
}

Так что теперь в вашем компоненте this.recipe может иметь значение «ноль», но вы не получите ошибку.

Answer 3

Возможно, что рецепты нулевые / неопределенные.Поэтому, когда вы вызываете getRecipe (0), появляется эта ошибка .. Попробуйте изменить ваш метод на что-то вроде этого:

getRecipe(index: number) {
    if (!!this.recipes && this.recipes.length > index) {
       return this.recipes[index];
    } else {
       return 0; //Whatever
    }
}