![](/img/trans.png)
[英]ERROR TypeError: Cannot read property 'length' of undefined in Angular 7 Drag and Drop
[英]ERROR TypeError: Cannot read property 'length' of undefined angular 8
我做了一個網站來隨機挑選一只貓,比如 Cat and Mash,但我有一個我無法理解的錯誤。
我有一個 JSON object ,其中有包含圖像的網址。 我需要隨機顯示圖像,但不是同一圖像的 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;
}
}
長度和索引不是一回事。 索引從 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
你對this.allCats
有什么價值觀嗎?
如果是
您收到錯誤是因為您試圖從數組中不存在的 position 獲取元素。
數組中的索引是一個只讀屬性,它是字符串中匹配項的從零開始的索引。
數組中的每個元素都有一個索引,即元素序列中的數字 position。 如果數組是 A,那么數組的第 i 個元素是 A[i]。 數組中元素的數量稱為它的長度。 數組 A 的長度是 A.length。
所以如果你想從數組 A 中獲取第 n 個元素,你需要訪問A[n-1]
我覺得我遺漏了一些信息,但是根據我所掌握的情況,您在 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() 是否返回任何貓?
您的 CatList model 有“圖像”屬性嗎? 它似乎是一個數組,所以它可能沒有。
如果是這種情況,您將 undefined 分配給“allcats”。 如果沒有,請檢查貓的結果屬性圖像,也許您的服務沒有返回任何內容。
為避免錯誤(但無法解決) ,您可以執行以下操作:
this.allcats = cats.images || [];
[
我復制了 json 我忘記了 json 中的關鍵圖像
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.