javascript - FEL TypeError: _v.context.$implicit.toggle är inte en funktion

Jag testar en enkel rekursiv Treeview-komponent i angular4 med koden nedan. Men varje gång jag försöker expandera barnvyn på toggle().

Jag får ett undantagsfel:

FEL TypeError: _v.context.$implicit.toggle är inte en funktion

Tack

tree-view.component.ts

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

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

Katalog.ts

 export class Directory{

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

  constructor() {

  }

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

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

Svar #1

Som yurzui föreslog, om du bara håller på att skriva dina data, har du inga klassinstanser, så metoden toggle finns inte tillgänglig. Om du verkligen vill ha din array med instanser av din Directory-klass, lägg till egenskaperna i konstruktorn och när du får data från api:n, skapa instanser av dina objekt, så här är en förkortad version:

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

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

och i ditt API-anrop:

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

Nu har du tillgång till toggle-metoden.

StackBlitz