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）

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

recipe-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

食谱可能为空/未定义。因此，当您调用getRecipe（0）时，会出现此错误。尝试将您的方法更改为以下内容：

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

Answer 2

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 3

在组件中，将id传递给服务的getRecipe（）方法。但是，您不能确定它是否存在，这就是它发生的原因。此外，服务中“配方”来自何处？您可以对其进行初始化，但不要为其分配任何值（尤其是作为数组）。也就是说，您根本没有调用getRecipes（）。

因此更改服务：

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

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

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

3 个答案:

组件

RecipeService