开发者问题收集

错误类型错误:无法读取未定义的角度 8 的属性“长度”

2019-11-14
1459

我创建了一个网站,可以像 Cat and Mash 一样随机挑选一只猫,但出现了一个我无法理解的错误。

我有一个 JSON 对象,其中有包含图像的 URL。我需要随机显示图像,但不是两次显示相同的图像。

控制台:

在此处输入图像描述

为什么 length 未定义?

import { Component, OnInit } from '@angular/core';
import { CatService } from '../services/cat.service';
import { CatList, Cat } from '../model/cat';

@Component({
  selector: 'app-cat',
  templateUrl: './cat.component.html',
  styleUrls: ['./cat.component.css']
})
export class CatComponent implements OnInit {
    twoCatsArray: Cat[] = [];
    allcats: Cat[];
    constructor(private catService: CatService) {}
    ngOnInit() {
        this.showMeTwoCats();
    }
    showMeTwoCats() {
        this.catService.getCats().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 {
        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.catService.catVote[likedCatindex].rating);
        this.catService.catVote[likedCatindex].rating = newRating;
        this.twoCatsArray = this.chooseTwoRandomCats(this.allcats);
    }
    getIncrementedCatRatingValue(rating: number | undefined): number {
        return rating ? ++rating : 1;
    }
}
3个回答

您的 CatList 模型有“images”属性?它似乎是一个数组,所以可能没有。

如果是这种情况,您正在将 undefined 分配给“allcats”。 如果没有,请检查 cats 的结果属性 images,也许您的服务没有返回任何内容。

要避免错误 (但不解决) ,您可以执行以下操作:

this.allcats = cats.images || [];
Danilo Torchio
2019-11-14

我觉得我遗漏了一些信息,但是根据我得到的信息,您在 chooseTwoRandomCats 中遇到了问题,您将 this.allCats 传递给它,但这是未定义的。

您执行以下操作:

allcats: Cat[];

然后您执行以下操作:

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

最终执行此操作:

const firstCatIndex = this.getRandomIndex(cats.length);
const secondCatIndex = this.getRandomIndex(cats.length, firstCatIndex);

那么,catService.getCats() 会返回任何猫吗?

Antonio Ortells
2019-11-14

长度和索引不是一回事。索引从 0 开始,长度从 1 开始。因此,包含 2 个项目的数组的长度为 2,但第二个项目的索引为 1。您需要从长度中减去 1。它选择的是一个不存在的索引。

var cats = [];
cats.push('Felix');
cats.push('Molly');

console.log('L: ' + cats.length); // L: 2
console.log('0: ' + cats[0]); // 0: Felix
console.log('1: ' + cats[1]); // 1: Molly
console.log('I: ' + cats[cats.length]); // I: Undefined
Piercy
2019-11-14