Überprüfen Sie das übergeordnete Element, wenn das Kontrollkästchen aktiviert ist. Winkel 2 Typoskript

Question

Hier sind Bilder

This Image shows all unchecked checkbox

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

Hier ist mein, wie mein Baum

 

    [ 
     { 
     "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": [ 

     ] 
     } 
    ] 

Hier ist mein Code für die Überprüfung jedes Checkbox aussieht.

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 })); 


} 

Hier ist eine Richtlinie, wo ich alle meine Kontrollkästchen erstellen, und ich habe EventEmitter verwendet, um die Veranstaltung auf meine Anweisung zu senden.

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

Es ist sehr schwierig zu verstehen, was Sie getan haben, und es scheint viele Probleme mit Code.

Aber der Grundgedanke dabei ist, dass, wenn node.selected auf einem Knoten geändert wird, emittiert die Veranstaltung mit den

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

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

auf dem übergeordneten HTML-Knoten Markup einen Ereignishandler hinzufügen ausgewählten Knoten:

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

Die onChildSelected-Funktion für das übergeordnete Element kann den Status des Knotens prüfen und sich selbst markieren und ein Ereignis erneut auslösen.