Advertisement
Guest User

Angular 4 Can't bind to 'data' since it isn't a known prop.

a guest
Mar 30th, 2017
810
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { Component, Input, OnInit } from '@angular/core';
  2.  
  3. @Component({
  4.   inputs: ['item'],
  5.   selector: 'node',
  6.   template: `
  7.     <li>
  8.       <a class="iconButton" (click)="toggle()"> <i class="material-icons">Add</i>{{ item.label }}, {{ IsExpanded }}</a>
  9.       <div *ngIf="IsExpanded">
  10.         <ul *ngIf="item.subs">
  11.           <template *ngFor="let subitem of item.subs">
  12.             <node [item]="subitem"></node>
  13.           </template>
  14.         </ul>
  15.       </div>
  16.     </li>
  17.   `
  18. })
  19. class Node implements OnInit {
  20.   @Input() item: any;
  21.   IsExpanded: boolean = false;
  22.   ngOnInit() {
  23.     console.log(this.item);
  24.   }
  25.   toggle() {
  26.     this.IsExpanded = !this.IsExpanded;
  27.     console.log(this.IsExpanded + ' ' + this.item.label);
  28.   }
  29. }
  30.  
  31. @Component({
  32.   inputs: ['data'],
  33.   selector: 'tree',
  34.   template: `
  35.     <ul>
  36.       <template *ngFor="let item of data">
  37.         <node [item]="item"></node>
  38.       </template>
  39.     </ul>
  40.   `
  41. })
  42. class Tree {
  43.   @Input() data: any[];
  44. }
  45.  
  46. @Component({
  47.   inputs: ['data'],
  48.   selector: 'app-tree-view',
  49.   template: '<tree [data]="data"></tree>'
  50. })
  51. export class TreeViewComponent {
  52.  
  53.   @Input()
  54.   data: any[] = [
  55.       {
  56.         label: 'a1',
  57.         subs: [
  58.           {
  59.             label: 'a11',
  60.             subs: [
  61.               {
  62.                 label: 'a111',
  63.                 subs: [
  64.                   {
  65.                     label: 'a1111'
  66.                   },
  67.                   {
  68.                     label: 'a1112'
  69.                   }
  70.                 ]
  71.               },
  72.               {
  73.                 label: 'a112'
  74.               }
  75.             ]
  76.           },
  77.           {
  78.             label: 'a12',
  79.           }
  80.         ]
  81.       },
  82.       {
  83.         label: 'b1',
  84.         subs: [
  85.           {
  86.             label: 'b11',
  87.           },
  88.           {
  89.             label: 'b12',
  90.           }
  91.         ]
  92.       }
  93.   ];
  94.  
  95. }
Advertisement
RAW Paste Data Copied
Advertisement