Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/30.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 带有EventEmitter的Angular2树复选框_Javascript_Angular - Fatal编程技术网

Javascript 带有EventEmitter的Angular2树复选框

Javascript 带有EventEmitter的Angular2树复选框,javascript,angular,Javascript,Angular,我有问题的树状视图,其中有儿童复选框。所以,问题是我从事件发射器得到嵌套的东西。请看截图和代码 这是我的自定义组件,其中我有递归,我只想传递所选的子级或父级 组件 import { Component, Input, EventEmitter, Output } from '@angular/core'; @Component ({ selector: 'category-tree-view', template: ` <ul class="tree">

我有问题的树状视图,其中有儿童复选框。所以,问题是我从事件发射器得到嵌套的东西。请看截图和代码

这是我的自定义组件,其中我有递归,我只想传递所选的子级或父级

组件

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});
    }
}
这是我在控制台记录数据时得到的屏幕截图


您能否尝试使用下面的代码并检查它是否有效

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

你对她有问题。展开然后折叠时,选定的复选框将消失。
selectCategory(cat, event) {
    console.log(cat, event);
}
selectedCategory(category, event) {
    this.selected.emit(event);
}