父对象不可见Angular2新对象字段？

Question

So I have the following dumbed-down version of something I'm working on:

tab.ts

import {Component, OnInit} from "@angular/core";
@Component({
  selector: 'tab',
  template: `
<h1>{{title}} / {{deletable}}</h1>
`,
})
export class Tab implements OnInit{

  title: string;
  deletable: boolean;

  ngOnInit(): void {
    this.deletable=true;
    console.log("TITLE: "+this.title);
  }

}

app.ts

import {Component, AfterViewInit} from '@angular/core';
import {Tab} from "./tab";

@Component({
  selector: 'my-app',
  template: `
<div *ngFor="let tab of tabs let i=index">
<tab></tab>
<button (click)="removeTab(i)">REMOVE</button>
</div>
<button (click)="addTab()">Add new tab</button>

`,
})
export class App implements AfterViewInit {

  tabs: Tab[] = [];

  ngAfterViewInit(): void {
    this.addTab();
  }

  addTab() {
    var tab = new Tab();
    tab.title = "List " + (this.tabs.length + 1);
    this.tabs.push(tab);
  }

  removeTab(index: number) {
    var tab = this.tabs[index];
    console.log("TITLE: "+tab.title);
    console.log("DELETABLE: "+tab.deletable);
    this.tabs.splice(index, 1);
  }

}

So, long story short, in this situation from the app component the console will log the correct title, while deletable will print undefined. Why is this? The other way around goes for the Tab component. Title will be undefined, but deletable won't be undefined, it will be true.

Obviously, in my app the use case is different, I get some variables from a sub component of Tab based on some forms that are also created dynamically. The problem is that if I try to access them from the parent app component they will be undefined as well, while they won't be undefined in the Tab component.

What pattern is used to work around this issue and could someone please explain why this is happening? I'm coming from Java and clearly, things are different there, heh. I would expect the parent component to be able to access everything that happens into the child component, every variable you expose and the other way around because they are working on the SAME(?) object.

Thanks in advance and have a nice day!

Answer 1

You should be using input to your child component and ViewChildren to have array of components as below

import {Component, OnInit} from "@angular/core";
@Component({
  selector: 'tab',
  template: `
            <h1>{{tab?.title}} / {{tab?.deletable}}</h1>
`,
})
export class Tab implements OnInit{
@Input() tab:TabModel;

}

In your App

@Component({
  selector: 'my-app',
  template: `
            <div *ngFor="let tab of tabs let i=index">
                <tab [tab]="tab"></tab>
            <button (click)="removeTab(i)">REMOVE</button>
            </div>
            <button (click)="addTab()">Add new tab</button>

`,
})
export class App implements AfterViewInit {
    @ViewChildren(Tab) tabs: QueryList<Tab>;
    tabs: Array<TabModel> = [
                {id : 1 , title: 'a',deletable:true},
                {id : 3 , title: 'v',deletable:false},
                {id : 5 , title: 'b', deletable: true}
            ];
    ngAfterViewInit(): void {
    }
    removeTab(i){
        //remove the item from the array using splice
        this.tabs.splice(..)
    }
}

Answer 2

Yup, what I was missing was that the Tab component isn't the same as doing new Tab() . <tab> creates a component while new Tab()` creates a new instance of the class. So I was trying to access two different things.

What I ended up doing is this: Crate a TabData object that holds stuff like title, deletable or any other info and inject it into the component using @Input and just control info thru that. Something like this:

@Component({
  selector: 'tab',
  providers: [TabsService],
  template: `
<products (totalUpdated)="processDeletable($event)"></products>
`,
})
export class Tab {

  @ViewChildren(Products)
  public products: QueryList<Products>;
  @Input() tabData:TabData;

  processDeletable(total: number) {
    this.tabData.deletable = total > 0 ? false : true;
    console.log("TAB " + this.tabData.title + " IS DELETABLE? " + this.tabData.deletable);
  }

}

You live and learn