1

My project structure:

enter image description here

app.component.ts:

import { Component } from "@angular/core"
import { Todo } from './components/shared/todo.model'
import { todos } from "./components/shared/todo.data"
import {TodoService} from "./components/shared/todoService"
import {TodoService} from "./components/shared/todoService";

@Component({
    moduleId: module.id,
    selector: "app",
    templateUrl: "app.component.html",
    styleUrls: ['app.component.css'],
    providers: [TodoService]
})
export class AppComponent {
    title:string = "Angular 2Do";
}

todo-form.component.ts:

import {Component, Output, EventEmitter} from "@angular/core";
import {Todo} from "../shared/todo.model";
import {TodoService} from "../shared/todoService"

@Component({
    moduleId: module.id,
    selector: "todo-form",
    templateUrl: "todo-form.component.html",
    styleUrls: ["todo-form.component.css"],
})
export class TodoForm {
    ...
    constructor(private todoService:TodoService) {
        console.log(this.todoService);
        this.todoService.order = 2;
        console.log( this.todoService);
    }

}

todo-list.component.ts:

import {Component, Input, OnInit} from "@angular/core"

import { ITodo } from "../shared/todo.model"
import { TodoService } from "../shared/todoService"

@Component({
    moduleId: module.id,
    selector: "todo-list",
    templateUrl: "todo-list.component.html",
    styleUrls: ["todo-list.component.css"],
})
export class TodoListComponent implements OnInit {
    todos:ITodo[];

    ...

    constructor(private todoService:TodoService) {
        ...
        console.log(this.todoService);
        this.todoService.order=1;
        console.log(this.todoService);

    }
   ...

}

app is the parent of the list and form components

Whaen I start application I see in console:

enter image description here

but if expand all I see:

enter image description here

Which result actual and why in second view I see 1 and in another 2.

gstackoverflow
  • 36,709
  • 117
  • 359
  • 710
  • Look at this https://jsfiddle.net/w4wz302s/. You mutate property and console.log() prints a reference to the object, and by the time you pop it open, it's changed. See also http://stackoverflow.com/questions/7389069/console-log-object-at-current-state – yurzui Dec 15 '16 at 09:31

2 Answers2

2

The console.log '+' button can only show you the current state of the object, not the object at the snapshot in time of when it was called.

See console.log() async or sync? for a more in depth explanation.

So order: 1, is the final state of the object.

Community
  • 1
  • 1
Simon Briggs
  • 1,249
  • 1
  • 11
  • 14
1

never use providers( providers: [TodoService] ) in component as

import { Component } from "@angular/core"
import { Todo } from './components/shared/todo.model'
import { todos } from "./components/shared/todo.data"
import {TodoService} from "./components/shared/todoService"
import {TodoService} from "./components/shared/todoService";

@Component({
    moduleId: module.id,
    selector: "app",
    templateUrl: "app.component.html",
    styleUrls: ['app.component.css']

})
export class AppComponent {
    title:string = "Angular 2Do";
}

it makes new instance when component initialise so put providers in module only ie. NgModule

anshuVersatile
  • 2,030
  • 1
  • 11
  • 18