typescript - 类型错误 : Cannot read property 'length' (typescript/Observable/angular2)

Question

我想做的很简单，我有一个返回 Person[] 的 Observable 的函数 getListData，我想将它作为 Person 传递给 html [].

所以我这样做了:

 @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;
      })
    }

但是我得到一个错误:

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

这是我在记录 listToDisplay 时得到的:

这就是我的呈现方式:

<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:

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

};

它可以代替 listToDisplay，这是怎么回事？

这是什么意思，我该如何解决？

Answer 1

问题可能与此 sortableData 有关:

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

而不是 *ngFor。

你应该只显示整个东西:

<div *ngIf="showingPerson">

(也就是说，更改 *ngIf 处的标志)在 加载数据之后，而不是像现在这样之前。

所以这样:

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
  })
}