Question

我正在使用下面的代码在 angular4 中测试一个简单的递归Treeview组件。但每当我尝试在toggle()上扩展子视图时。

我收到异常错误：

ERROR 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方法。

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

1 个答案:

StackBlitz