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

Question

我是Angular的新手，我有一个错误需要修复。这是我在尝试显示来自JSONPLACEHOLDER的数据列表时遇到的错误。我不知道代码出了什么问题。我能请你帮忙吗？谢谢你。

错误类型错误：无法读取RecipeService.Push./src/app/Recipes/Recipe.Service.ts.RecipeService.getRecipe(Recipe.Service.ts:25)在SafeSubScriper._Next(Recipe-Detail.Component.ts:26)在SafeSubScriper.Push../Node_Modules/RxJS/_ESM5/Internal/Subscriber.js.SafeSubScriper.__TryRunsub(Subscriber.js:196)在SafeSubScriper.Push./Node_Modules/RxJS/_ESM5/Internal/Subscriber.js.SafeSubscriper.Next(Subscriber.js:134)处未定义的属性“0”在subscriber.push./node_modules/rxjs/_esm5/internal/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/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

可能是菜谱为空/未定义。因此，当您调用getRecipe(0)时，会出现这个错误。尝试将您的方法更改为如下所示：

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