如果检查孩子，请检查父母。 Angular 2打字稿

Question

这里是图片

This Image shows all unchecked checkbox

I wanted to happen if the child is checked all parents will be check

这是我的树的样子

[ { “身份证”：1， “parent_category_id”：0， “名称”：“一般”， "description": "Doloremque voluptas veniam architecto consectetur beatae。", “蛞蝓”：“一般”， “位置”：1， “is_default”：0， "created_at": "2016-04-11 07:00:48", "updated_at": "2016-04-11 07:00:48", “deleted_at”：空， “post_count”：0， “子类别”：[ { “身份证”：5， “parent_category_id”：1， “名称”：“杂志”， "description": "这是杂志类别", “蛞蝓”：“杂志”， “位置”：1， “is_default”：0， "created_at": "2016-04-11 07:55:35", "updated_at": "2016-04-11 08:08:19", “deleted_at”：空， “post_count”：0， “子类别”：[ { “身份证”：6， “parent_category_id”：5， “名称”：“生活方式”， “描述”：“生活方式杂志”， “蛞蝓”：“生活方式”， “位置”：1， “is_default”：0， "created_at": "2016-04-11 08:07:10", "updated_at": "2016-04-11 08:07:10", “deleted_at”：空， “post_count”：0， “子类别”：[ ] } ] } ] }, { “身份证”：2， “parent_category_id”：0， "name": "Rush 名片", "description": "Voluptatem nam similique et rem ratione laudantium.", "slug": "rush-business-cards", “位置”：1， “is_default”：0， "created_at": "2016-04-11 07:00:48", "updated_at": "2016-04-11 07:00:48", “deleted_at”：空， “post_count”：0， “子类别”：[ ] }, { “身份证”：3， “parent_category_id”：0， “名称”：“传单”， "description": "Consequatur molestiae enim necessitatibus vero et eum sint.", “蛞蝓”：“传单”， “位置”：1， “is_default”：0， "created_at": "2016-04-11 07:00:48", "updated_at": "2016-04-11 07:00:48", “deleted_at”：空， “post_count”：0， “子类别”：[ ] }, { “身份证”：4， “parent_category_id”：0， “名称”：“手册”， "description": "Ratione magnam repellendus quo commodi enim。", “蛞蝓”：“小册子”， “位置”：1， “is_default”：0， "created_at": "2016-04-11 07:00:48", "updated_at": "2016-04-11 07:00:48", “deleted_at”：空， “post_count”：0， “子类别”：[ ] } ]

这是我检查每个复选框的代码。

updateCategory(category) {
    category.selected = (category.selected) ? false : true
    let myCategory = _.findWhere(this.postDetail.categories,{id: category.id})
    if(_.isUndefined(myCategory))
        this.postDetail.categories.push(category)
    else
        this.postDetail.categories = _.without(this.postDetail.categories, _.findWhere(this.postDetail.categories, { id: category.id }));


}

这是一个指令，我在其中创建了所有复选框，并使用 EventEmitter 在我的指令上发送事件。

import {Component, Input, Output, ElementRef, EventEmitter} from 'angular2/core';
import { PostService }   from './post.service';

@Component({
  selector: 'node',
  providers: [],
  template: `
    <div class="checkbox3 checkbox-success checkbox-inline checkbox-check checkbox-round checkbox-light">
      <input (change)="updateCategory(node)" type="checkbox" attr.id="category-{{ node.id }}" [(ngModel)]="node.selected"/>
      <label  attr.for="category-{{ node.id }}">
          {{  node.name }}
      </label>
    </div>
   <ul *ngIf="node.subcategories != null">
      <li style="list-style: none;"><node *ngFor="#n of node.subcategories" [node]="n"></node></li>
    </ul>
  `,
  directives: [Node]
})
export class Node {
  @Input() node;
  @Input() public postDetail : Object = [];
  @Output() public emitter: EventEmitter<any> = new EventEmitter();

  constructor(private _service: PostService) {

  }

  updateCategory(node) {
    this.postDetail = { name: 'checkbox', data:node}
    this._service.emitEvent.next(this.postDetail);
  }
}

Answer 1

你做了什么很难理解，而且代码似乎有很多问题。

但这里的基本思想是，当node.selected 在节点上发生更改时，在选定节点的情况下发出事件

@Output() public nodeSelected: EventEmitter<Node> = new EventEmitter();

 updateCategory(node) {
    this.nodeSelected.next(this);
  }

在父 html 节点标记上添加事件处理程序：

<node *ngFor="#n of node.subcategories" [node]="n" (nodeSelected)="onChildSelected($event)"> 

parent 上的onChildSelected 函数可以检查节点的状态并将自身标记为选中，并再次引发事件。