TypeError：プロパティ 'length'を読み取ることができません（typescript/Observable/angular2）

Question

私がやりたいことはかなり単純です.のObservableを返す関数getListDataがあり、それをPerson [ ]。

と、この：私がログインしたときに

EXCEPTION: TypeError: Cannot read property 'length' of undefined in [listToDisplay in AppCmp@41:60]

これは私が得るものlistToDisplayです：

@Injectable() 
    export class AppCmp implements OnInit { 

    listToDisplay: Person[]; 

    showingPerson = false; 

    constructor(private _myService: MyService) { 
    }; 

    public showMatcherData(): void { 
     this.showingPerson = true; 
     this. _myService.getListData().subscribe(res => { 
     this.listToDisplay = res; 
     }) 
    } 

が、私はエラーを取得：

は、だから私はそれをやりましたどのように私はそれを提示している：

<div *ngIf="showingPerson"> 
    <div dnd-sortable-container [dropZones]="['zone-one']" [sortableData]="listToDisplay"> 
     <div class="list-bg" *ngFor="#per of listToDisplay; #i = index" dnd-sortable [sortableIndex]="i"> 
     ID: {{per.id}} <p></p> age: {{per.age}} 
     </div> 
    </div> 
    </div> 

場合イム使用してPERSON2：

はそれが動作する代わりにlistToDisplayの

let person2 =() => { 
    return [ 
    { 
     "id": "2323", 
     "age": 22 
    }, 
    { 
    "id": "2323", 
     "age": 22 
    } 
    , 
    { 
    "id": "2323", 
     "age": 22 
    } 
    ] 

}; 

、どのように来ますか？

どういう意味ですか、どうすれば修正できますか？

Answer 1

問題は、このsortableDataに関連することができます

<div dnd-sortable-container [dropZones]="['zone-one']" [sortableData]="listToDisplay"> 

ない*ngFor。あなたが今しているようにあなたがいない前に、データをロード後（*ngIfであるフラグを変更する、つまり）

<div *ngIf="showingPerson"> 

：

あなただけの全体のものが表示されます。

ので、この：

public showMatcherData(): void { 
    this.showingPerson = true; // <------------------------------ line will move 
    this. _myService.getListData().subscribe(res => { 
    this.listToDisplay = res; 
    }) 
} 

はなるはずです。

public showMatcherData(): void { 
    this. _myService.getListData().subscribe(res => { 
    this.listToDisplay = res; 
    this.showingPerson = true; // <------------------------------ line moved 
    }) 
}