Angular-无法查看Angular2如何自动更新服务中的数据

Question

I am an Angular2 beginner, creating a test note-taking app. The app is simple: I have a NotesContianerComponent which connects to a NoteService which has the getNotes() and addNote() method.

In the NotesContainerComponent , I am storing the data returned from service in a member myNotes and on ngOnInit event, refreshing the array. I am not touching that array anywhere in that code as of now.

Now, when I add a new note using the form and call the service's addNote() method from the NotesContainerComponent , the note does get added to the backend mock notes array, but at the same time the UI (ie NotesContainerComponent ) gets updated with the new note automatically! I am not doing anything to refresh it manually.

To investigate, I added a console.log() to the getNotes method of the service, however it is being only called the first time, possibly by ngOnInit hook.

What I cannot figure out is, how does Angular2 know about the new note without even querying the service automatically? And how to stop this? Any clues will be appreciated.

NotesContainerComponent code for reference:

export class NotesContainerComponent implements OnInit {
    constructor(
        private noteService: NoteService
    ) { }

    addNote(newNote):void {
        this.noteService.add(newNote);
    }

    myNotes: Notes[];

    ngOnInit() {
        this.noteService.getNotes()
            .then(notes => this.myNotes = notes);
    }
}

Answer 1

If you are storing your mock data in an Object or an Array and this.myNotes 's reference is that Object s reference. When your mock datas content changes, all the references will change too. This is because objects are mutable in javascript.