Angular报错TypeError: Cannot read properties of undefined (reading 'rating')求助

我在一个动物投票站点中，点击猫咪选项时触发报错，错误信息为：
Angular ERROR TypeError: Cannot read properties of undefined (reading 'rating')

谷歌搜索后未找到解决方案，附上相关HTML和TS代码，请求技术帮助。

HTML代码 #

<div class='wrapper'>
    <div class="cat" *ngFor="let cat of twoCatsArray" (click)="voteForThisCat(cat.id)">
        <img class="cat-image" [src]="cat.url">
    </div>
</div>

TypeScript代码 #

twoCatsArray: Cat[] = [];
allcats: Cat[];

constructor(private catService: CatService) { }

ngOnInit() {
  this.showMeTwoCats();
}

showMeTwoCats() {
  this.catService.getAllCat().subscribe((cats: CatList) => {
    this.allcats = cats.images;
    this.twoCatsArray = this.chooseTwoRandomCats(this.allcats);
  });
}

chooseTwoRandomCats(cats: Cat[]): Cat[] {
  const firstCatIndex = this.getRandomIndex(cats.length);
  const secondCatIndex = this.getRandomIndex(cats.length, firstCatIndex);

  return [cats[firstCatIndex], cats[secondCatIndex]];
}

getRandomIndex(maxValue: number, differentThanValue?: number): number {
  let index: number;
  do {
    index = this.getRandomInt(maxValue);
  } while (index === differentThanValue);
  return index;
}

getRandomInt(max: number): number {
  return Math.floor(Math.random() * Math.floor(max));
}

voteForThisCat(id: string) {
  const likedCatindex = this.allcats.findIndex((cat: Cat) => cat.id === id);
  const newRating = this.getIncrementedCatRatingValue(this.twoCatsArray[likedCatindex].rating);
  this.twoCatsArray[likedCatindex].rating = newRating;

  this.twoCatsArray = this.chooseTwoRandomCats(this.allcats);
}

getIncrementedCatRatingValue(rating: number | undefined): number {
  return rating ? ++rating : 1;
}

错误截图 #

问题原因 #

报错核心是this.twoCatsArray[likedCatindex]为undefined。你在voteForThisCat方法中，用allcats.findIndex()获取的是点击猫咪在全量猫数组中的索引，却用这个索引去访问随机选出的两只猫数组twoCatsArray，这两个数组的索引完全不对应，导致访问到不存在的元素，进而读取rating时触发报错。

解决方案 #

方案一：直接在twoCatsArray中定位目标猫咪（推荐）

修改voteForThisCat方法，直接通过id找到twoCatsArray中的对应猫咪，同时同步更新全量数组的评分（如果需要）：

voteForThisCat(id: string) {
  // 更新两只猫数组中对应猫咪的评分
  const targetCatInTwo = this.twoCatsArray.find(cat => cat.id === id);
  if (targetCatInTwo) {
    targetCatInTwo.rating = this.getIncrementedCatRatingValue(targetCatInTwo.rating);
  }

  // 同步更新全量猫数组的评分（可选，根据业务需求决定）
  const targetCatInAll = this.allcats.find(cat => cat.id === id);
  if (targetCatInAll) {
    targetCatInAll.rating = this.getIncrementedCatRatingValue(targetCatInAll.rating);
  }

  this.twoCatsArray = this.chooseTwoRandomCats(this.allcats);
}

方案二：在twoCatsArray中获取对应索引

如果偏好使用索引操作，需在twoCatsArray中重新查找索引：

voteForThisCat(id: string) {
  // 获取点击猫咪在twoCatsArray中的索引
  const likedCatIndexInTwo = this.twoCatsArray.findIndex(cat => cat.id === id);
  if (likedCatIndexInTwo !== -1) {
    const newRating = this.getIncrementedCatRatingValue(this.twoCatsArray[likedCatIndexInTwo].rating);
    this.twoCatsArray[likedCatIndexInTwo].rating = newRating;
  }

  // 同步更新全量猫数组的评分（可选）
  const likedCatIndexInAll = this.allcats.findIndex(cat => cat.id === id);
  if (likedCatIndexInAll !== -1) {
    this.allcats[likedCatIndexInAll].rating = this.getIncrementedCatRatingValue(this.allcats[likedCatIndexInAll].rating);
  }

  this.twoCatsArray = this.chooseTwoRandomCats(this.allcats);
}

额外优化建议 #

• 增加空值判断：调用findIndex后判断结果是否为-1，调用find后判断结果是否为undefined，避免因数据异常再次触发报错。
• 确保Cat接口中rating字段可选或有默认值，减少未初始化导致的问题。

内容的提问来源于stack exchange，提问作者Vinodea Richard