Angular2 Baum Kontrollkästchen mit EventEmitter

Question

Ich habe Probleme mit der Baumansicht, die Kontrollkästchen für Kinder hat. Das Problem ist also, dass ich verschachtelte Sachen vom Event-Emitter bekomme. Bitte sehen Sie sich den Screenshot und den Code an.

Dies ist meine benutzerdefinierte Komponente, wo ich Rekursion habe und ich möchte nur ausgewählte Kind oder Eltern übergeben.

Komponente

import { Component, Input, EventEmitter, Output } from '@angular/core'; 

@Component ({ 
    selector: 'category-tree-view', 
    template: ` 
    <ul class="tree"> 
     <li *ngFor="let category of treeData"> 
      <label class="control control--checkbox" *ngIf="hasCheckbox"> 
       <input type="checkbox" [checked]="category.checked" (change)="selectedCategory(category, $event)" /> 
       <div class="control__indicator"></div> 
      </label> 
      <span *ngIf="category.subcategories?.length" (click)="toggleChildren(category)" class="toggle">+</span> 
      {{category.name}} 
      <div class="tree-actions" *ngIf="hasActions"> 
       <button class="btn btn-link edit" (click)="editCategory(category)"> 
        <i class="icon-admin-edit"></i> 
       </button> 
       <button class="btn btn-link delete" (click)="deleteCategory(category)"> 
        <i class="icon-admin-close"></i> 
       </button> 
      </div> 
      <category-tree-view [treeData]="category.subcategories" *ngIf="category.visible" (edit)="editCategory($event)" (delete)="deleteCategory($event)" [hasCheckbox]="hasCheckbox" (selected)="selectedCategory($event)" [hasActions]="hasActions"></category-tree-view> 
     </li> 
    </ul> 
    ` 
}) 
export class ProductCategoryTreeView { 
    @Input() treeData: any[]; 
    @Input() hasCheckbox: boolean = false; 
    @Input() hasActions: boolean = false; 
    @Output() edit = new EventEmitter(); 
    @Output() delete = new EventEmitter(); 
    @Output() selected = new EventEmitter(); 

    constructor() {} 

    toggleChildren(node: any) { 
     node.visible = !node.visible; 
    } 

    editCategory(category){ 
     this.edit.emit(category); 
    } 

    deleteCategory(category) { 
     this.delete.emit(category); 
    } 

    selectedCategory(category, event) { 
     this.selected.emit({category, event}); 
    } 
} 

Dies ist, was ich in meiner anderen HTML-Seite habe, die die andere Komponente ist, in diesem Fall Produkt-form.component.html

<category-tree-view [treeData]="categories" (edit)="editCategory($event)" (delete)="deleteCategory($event)" (selected)="selectCategory($event)" [hasCheckbox]="true"></category-tree-view> 

Und auch ich habe gerade Methode in der Komponente Produkt-form.component.ts

selectCategory(cat, event) { 
    console.log(cat, event); 
} 

Hier ist der Screenshot, den ich bekommen habe, wenn ich diese Daten logge.

Answer 1

Können Sie bitte versuchen Sie es mit folgendem Code und überprüfen, ob es funktioniert oder nicht?

selectedCategory(category, event) { 
    this.selected.emit(event); 
}