错误TypeError：无法读取未定义角度8的属性“长度”

Question

我建立了一个网站，随机挑选猫（例如Cat和Mash），但我有一个我无法理解的错误。

我有一个JSON对象，其中包含包含图像的URL。我需要随机显示图像，而不是同一图像的2倍。

控制台：

为什么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;
    }
}

Answer 1

长度和索引不是一回事。索引基于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

Answer 2

您对this.allCats有任何值吗？

如果是

收到错误是因为您试图从数组中不存在的位置获取元素。

数组中的

index 是一个只读属性，它是字符串中匹配项的从零开始的索引。

  

数组中的每个元素都有一个索引，它只是其在元素序列中的数字位置。如果数组为A，则数组的第i个元素为A [i]。数组中元素的数量称为其长度。数组A的长度为A.length。

因此，如果您希望从数组A中获取第n个元素，则需要访问A[n-1]

Answer 3

我觉得我缺少一些信息，但是有了我得到的信息，您在selectTwoRandomCats中遇到了问题，您正在将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（）返回的是猫吗？

Answer 4

您的CatList模型具有“图像”属性吗？它似乎是一个数组，所以可能没有。

在这种情况下，您要将undefined分配给“ allcats”。 如果没有，请检查猫的结果属性图像，也许您的服务未返回任何内容。

为避免错误（但无法解决），您可以执行以下操作：

this.allcats = cats.images || [];

Answer 5

[

我复制了一个json，却忘记了json中的关键图像