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. 並在那里訂閱