子がチェックされているかどうかを確認します。アンギュラ2活字体

Question

ここでは画像はここ

This Image shows all unchecked checkbox

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

ある私の木は

 

    [ 
     { 
     "id": 1, 
     "parent_category_id": 0, 
     "name": "General", 
     "description": "Doloremque voluptas veniam architecto consectetur beatae.", 
     "slug": "general", 
     "position": 1, 
     "is_default": 0, 
     "created_at": "2016-04-11 07:00:48", 
     "updated_at": "2016-04-11 07:00:48", 
     "deleted_at": null, 
     "post_count": 0, 
     "subcategories": [ 
      { 
      "id": 5, 
      "parent_category_id": 1, 
      "name": "Magazine", 
      "description": "This is the magazine category", 
      "slug": "magazine", 
      "position": 1, 
      "is_default": 0, 
      "created_at": "2016-04-11 07:55:35", 
      "updated_at": "2016-04-11 08:08:19", 
      "deleted_at": null, 
      "post_count": 0, 
      "subcategories": [ 
       { 
       "id": 6, 
       "parent_category_id": 5, 
       "name": "Life Style", 
       "description": "The Life Style Magazine", 
       "slug": "life-style", 
       "position": 1, 
       "is_default": 0, 
       "created_at": "2016-04-11 08:07:10", 
       "updated_at": "2016-04-11 08:07:10", 
       "deleted_at": null, 
       "post_count": 0, 
       "subcategories": [ 

       ] 
       } 
      ] 
      } 
     ] 
     }, 
     { 
     "id": 2, 
     "parent_category_id": 0, 
     "name": "Rush Business Cards", 
     "description": "Voluptatem nam similique et rem ratione laudantium.", 
     "slug": "rush-business-cards", 
     "position": 1, 
     "is_default": 0, 
     "created_at": "2016-04-11 07:00:48", 
     "updated_at": "2016-04-11 07:00:48", 
     "deleted_at": null, 
     "post_count": 0, 
     "subcategories": [ 

     ] 
     }, 
     { 
     "id": 3, 
     "parent_category_id": 0, 
     "name": "Flyers", 
     "description": "Consequatur molestiae enim necessitatibus vero et eum sint.", 
     "slug": "flyers", 
     "position": 1, 
     "is_default": 0, 
     "created_at": "2016-04-11 07:00:48", 
     "updated_at": "2016-04-11 07:00:48", 
     "deleted_at": null, 
     "post_count": 0, 
     "subcategories": [ 

     ] 
     }, 
     { 
     "id": 4, 
     "parent_category_id": 0, 
     "name": "Brochures", 
     "description": "Ratione magnam repellendus quo commodi enim.", 
     "slug": "brochures", 
     "position": 1, 
     "is_default": 0, 
     "created_at": "2016-04-11 07:00:48", 
     "updated_at": "2016-04-11 07:00:48", 
     "deleted_at": null, 
     "post_count": 0, 
     "subcategories": [ 

     ] 
     } 
    ] 

に見える私の方法です。ここで、各チェックボックスをチェックするための私のコードです。ここで

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がノード上で変更されたときに、イベントハンドラを追加し、親HTMLノードのマークアップで

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

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

を選択されたノードにイベントを発することである：

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

親の関数onChildSelectedは、ノードの状態をチェックし、それ自身をチェックし、再度イベントを発生させることができます。