TypeError：无法读取属性＆＃39; length＆＃39; （打字稿/可观察/ angular2）

Question

我想做的事情很简单，我有一个函数text，它返回getListData的Observable，我想把它作为Person []传递给html。

所以我做到了：

Person[]

但是我收到了错误：

  

EXCEPTION：TypeError：无法读取属性＆＃39; length＆＃39;未定义的   [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;
      })
    }

如果我正在使用person2：

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

而不是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
  })
}