[英]“Error: Uncaught (in promise): TypeError: Cannot read property 'length' of undefined”
Could anyone help with the error 任何人都可以帮助解决错误
"Error: Uncaught (in promise): TypeError: Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
at SomeComponent.webpackJsonp.805.SomeComponent.getBList (http://localhost:4200/1.chunk.js:23613:34)
at SomeComponent.webpackJsonp.805.SomeComponent.ngOnInit (http://localhost:4200/1.chunk.js:23610:14)
at checkAndUpdateDirectiveInline (http://localhost:4200/vendor.bundle.js:11957:19)
at checkAndUpdateNodeInline (http://localhost:4200/vendor.bundle.js:13336:17)
at checkAndUpdateNode (http://localhost:4200/vendor.bundle.js:13304:16)
at debugCheckAndUpdateNode (http://localhost:4200/vendor.bundle.js:13933:59)
at debugCheckDirectivesFn (http://localhost:4200/vendor.bundle.js:13874:13)
at Object.eval [as updateDirectives] (ng:///SeasonPageModule/SeasonPageComponent_Host.ngfactory.js:16:5)
at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:4200/vendor.bundle.js:13859:21)
at checkAndUpdateView (http://localhost:4200/vendor.bundle.js:13271:14)
at callWithDebugContext (http://localhost:4200/vendor.bundle.js:14259:42)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:4200/vendor.bundle.js:13799:12)
at ViewRef_.detectChanges (http://localhost:4200/vendor.bundle.js:11368:63)
at RouterOutlet.activateWith (http://localhost:4200/vendor.bundle.js:32580:42)
at ActivateRoutes.placeComponentIntoOutlet (http://localhost:4200/vendor.bundle.js:31760:16)
at ZoneAwareError (http://localhost:4200/vendor.bundle.js:95038:33)
at resolvePromise (http://localhost:4200/vendor.bundle.js:94728:31)
at resolvePromise (http://localhost:4200/vendor.bundle.js:94713:17)
at http://localhost:4200/vendor.bundle.js:94762:17
at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:94502:35)
at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:5362:37)
at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:94501:40)
at Zone.runTask (http://localhost:4200/vendor.bundle.js:94378:47)
at drainMicroTaskQueue (http://localhost:4200/vendor.bundle.js:94660:35)"
I am trying to get the values of an inner array from a json file to a variable that I have created. 我试图将内部数组的值从json文件获取到我创建的变量。 My json file is in the following format.
我的json文件采用以下格式。
JSON filename: file.json
{
"A":[
{
"id": "123",
"title": "title of A",
"type": "asf",
"B": [
{
"id": "1",
"title": "title1"
},
{
"id": "2",
"title": "title2"
}
]
]
}
I have created couple of models to store the values 我创建了几个模型来存储值
A.model.ts
import {B} from './b.model';
export interface A {
type?;
id?;
title?;
b?: B[];
}
B.model.ts
export interface B {
id?;
title?;
}
My Service that returns the json has the following 我的返回json的服务有以下内容
someService.service.ts
import {A} from '../model/a.model';
constructor(private _http: Http, private _authService: AuthService) {}
get() {
return this._http.get('app/file.json')
.toPromise()
.then(res => <A[]> res.json().showList)
.then(A => { return A; });
}
In the component.ts I have written the following code. 在component.ts中,我编写了以下代码。
<somename>.component.ts
import { Component, OnInit } from '@angular/core';
import { Routes, Router } from '@angular/router';
import {Observable} from 'rxjs';
import {A} from '../../shared/model/a.model';
import {SomeService} from '../../shared/service/someService.service';
import {B} from '../../shared/model/b.model';
import {Location} from '@angular/common';
class AList implements A {
constructor(public title?, public id?, public type?, public bList?: B[]) {}
}
class BList implements B {
constructor(public title?, public id?) {}
}
@Component({
selector: 'ms-season-page',
styleUrls: [],
template: require('./season-page.component.html')
})
export class SomeComponent implements OnInit {
b: B = new BList();
bArray: B[] = [];
aArray: A[];
constructor(private router: Router, private someService: SomeService) {
}
ngOnInit() {
this.someService.get().then(a => this.aArray = a);
this.bArray = this.getBList(this.aArray);
}
getBList(aArray: AList[]): B[] {
let bList: B[] = [];
for(let j=0; j<aArray.length; j++) {
for (let i=0; i<aArray[j].seasonList.length; i++) {
let b = new BList(aArray[j].B[i].title, aArray[j].B[i].id);
bList.push(b);
}
}
return bList;
}
}
Can anyone help me telling what mistake I am doing? 谁能帮我说出我在做什么错? Or is there a way to get the 'B' array values.
或者有没有办法获得'B'数组值。
Thanks in advance. 提前致谢。
The issue is that this.someService.get
is asynchronous and you are trying to access the result of it as if it was synchronous: 问题是
this.someService.get
是异步的,你试图访问它的结果,好像它是同步的:
this.someService.get().then(a => this.aArray = a); // This is asynchronous
this.bArray = this.getBList(this.aArray); // This will be called before `this.aArray` is set to anything. Now `this.aArray` will be undefined
The fix is to use this.aArray
in the callback of the asynchronous method: 修复是在异步方法的回调中使用
this.aArray
:
this.someService.get().then(a => {
this.aArray = a;
this.bArray = this.getBList(this.aArray); // Now `this.aArray` will have some value provided `someService.get()` returns something
});
This res.json().showList
is wrong. 这个
res.json().showList
是错误的。 json
returns a promise. json
返回一个承诺。 A promise does not have a showList
member. promise没有
showList
成员。
toPromise()
.then(res => res.json())
.then(A => { return A.showList; });
An assertions should not be considered without caution . 不应该谨慎地考虑断言 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.