错误TypeError:_v.context.$ implicit.toggle不是函数

Question

我正在使用下面的代码在angular4中测试一个简单的递归Treeview组件.但每当我试图扩大儿童观点时toggle().

我收到一个异常错误:

错误TypeError:_v.context.$ implicit.toggle不是函数

谢谢

树view.component.ts

export class TreeViewComponent implements OnInit {  
  constructor() { }
  ngOnInit() {}     
  @Input() directories: Directory[];
}

树view.component.html

<ul>
  <li *ngFor="let dir of directories">
    <label (click)="dir.toggle()"> {{ dir.title }}</label>
    <div *ngIf="dir.expanded">
      <tree-view [locations]="dir.children"></tree-view>
    </div>
  </li>
</ul>

Directory.ts

 export class Directory{

      title: string;
      children: Directory[]
      expanded = true;
      checked = false;

  constructor() {

  }

  toggle() {
    this.expanded = !this.expanded;
  }

  getIcon() {
    if (this.expanded) {
      return '-';
    }
    return '+';
  }
}

Answer 1

像yurzui建议的那样,如果您只是键入数据,则没有类实例,因此该方法toggle不可用.如果你真的想让你的数组包含你的Directory类的实例,那么将属性添加到构造函数中,当你从api获取数据时,创建对象的实例,这样缩短版本:

export class Directory {
  title: string;
  expanded: boolean;

  constructor(title: string, expanded: boolean) {
    this.title = title;
    this.expanded = expanded 
  }
}

在你的api电话中:

return this.httpClient.get<Directory[]>('url')
  .map(res => res.map(x => new Directory(x.title, x.expanded)))

现在您可以访问该toggle方法.

StackBlitz