Question

在 Angular 中显示数据列表时出现此错误 => 错误：TypeError：无法读取未定义的属性“0”

2018-11-14

1561

json angular routes frontend

我是 Angular 新手，我有一个错误需要修复。这是我在尝试显示来自 jsonplaceholder 的数据列表时遇到的错误。我不知道代码中有什么问题。我可以寻求帮助吗？谢谢。

ERROR TypeError: Cannot read property '0' of undefined at RecipeService.push../src/app/recipes/recipe.service.ts.RecipeService.getRecipe ( recipe.service.ts:25 ) at SafeSubscriber._next ( recipe-detail.component.ts:26 ) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at BehaviorSubject.push../node_modules/rxjs/_esm5/internal/BehaviorSubject.js.BehaviorSubject._subscribe (BehaviorSubject.js:22) at BehaviorSubject.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43) at BehaviorSubject.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject._trySubscribe (Subject.js:89) at BehaviorSubject.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:29)

recipe-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];
  }

<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

可能是配方为空/未定义。因此，当您调用 getRecipe(0) 时，会出现此错误。请尝试将您的方法更改为如下内容：

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

Answer 2

在组件中，您将 id 传递给服务的 getRecipe() 方法。但是，您无法确定它是否存在，这就是它发生的原因。此外，在服务中，“recipes”来自哪里？您初始化它，但从未为其分配任何值（尤其是作为数组）。即，您根本没有调用 getRecipes()。

因此，更改服务：

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

因此，现在在您的组件中，this.recipe 可能等于“null”，但您不会收到错误。

Answer 3

private recipes: Recipe[] 未在此处初始化。在访问元素之前，您必须检查 undefined 和 length 。

Component

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];
  }