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

Question

每次加载网页时，都必须单击徽标以按顺序排列数据，以完全填充组件中的本地数组。 提取的数据位于本地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。

Answer 1

问题：

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

解：

1. 通过在observable上使用map运算符来应用更改（您在getAllIpageLinks中进行的getAllIpageLinks ）。
2. 返回组件中可观察到的实例。
3. 订阅组件中的可观察对象（不在.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);
                 });
 }

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