javascript - TypeError无法读取未定义的属性“length”- Angular 4

每次加载网页时，都必须单击徽标以按顺序排列数据，以完全填充组件中的本地数组。提取的数据位于本地JSON文件中。每次必须刷新页面是相当不专业/烦人的。

使用Angular CLI 1.3.2

这是我的问题所在：

 @Injectable()
export class LinksService implements OnInit{
  siteFile : IFile[];


  constructor(private http: Http) {

    this.getJSON().subscribe(data => this.siteFile = data, error =>
     console.log(error));
  }

 public getJSON(): Observable<any> {
    return this.http.get('./assets/docs/links.json')
                     .map((res:any) => res.json());
 }
 getAllIpageLinks() : IPageLink[]{
    var selectedIPageLinks: IPageLink[] = new Array();
    var selectedFileLinks : IFile[] = new Array();

    selectedFileLinks = this.siteFile;


   for (var i=0; i<selectedFileLinks.length; i++)
   {
       selectedIPageLinks =
       selectedIPageLinks.concat(selectedFileLinks[i].files);
   }
    return selectedIPageLinks.sort(this.sortLinks);
}

零件：

constructor(private elRef: ElementRef, private linksService: LinksService) {
   this._file = this.linksService.getAllIpageLinks();
  }

编辑
为了使IFile []数组完全呈现，必须单击标题。我尝试将IFile设置为空数组（IFile [] = []）错误消失了，但是，它将呈现空数据。

问题似乎出在For循环中，它无法识别.length。

最佳答案

问题：

代码正确，但是方法错误。订阅可观察的getJSON()是异步任务。在getJSON()返回任何数据之前，您已经调用了getAllIpageLinks()，因此在第一次运行时会得到空值。我相信，由于您已将服务作为单例注入组件中，因此数据将在后续调用中填充（单击徽标刷新后）。

解：


通过在observable上使用getAllIpageLinks运算符来应用更改（在map中进行的更改）。
返回组件中可观察到的实例。
订阅组件中的可观察对象（不在.service中）


欢迎使用StackOverflow。请复制代码，将其粘贴到问题中，而不要提供屏幕截图。我可以提供详细的密码

参考代码：
我尚未测试语法，但足以指导您。
1.重构getAllIpageLinks()如下

public getAllIpageLinks(): Observable<any> {
return this.http.get('./assets/docs/links.json')
                 .map((res:any) => res.json());
                 .map(res => {

                    var selectedIPageLinks: IPageLink[] = new Array();
                    var selectedFileLinks : IFile[] = new Array();

                    selectedFileLinks = res;
                    for (var i=0; i<selectedFileLinks.length; i++)
                        {
                            selectedIPageLinks =
                            selectedIPageLinks.concat(selectedFileLinks[i].files);
                        }
                        return selectedIPageLinks.sort(this.sortLinks);
                 });
 }

在组件中的getAllIpageLinks（）上方调用
并在那里订阅

关于javascript - TypeError无法读取未定义的属性“length”- Angular 4，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50396166/