javascript - Angular 4 @Input property update does not affect the UI - Stack Overflow

admin管理员组

文章数量:1292227

There are 2 ponents: parentComponent and ChildComponent, which is defined inside the parent. In the parentComponent there is a local variable which is used as value to pass to an input property of the ChildComponent (using a getter).

ParentComponent.ts:

@Component({
selector:'parent-ponent',
template:`
<h1>parent ponent</h1>
<child-ponent [personData]="PersonData"></child-ponent>
`
})
export class ParentComponent{
personData:Person;

get PersonData():Person{
return this.personData;
}

set PersonData(person:Person){
this.personData = person;
}

ngOnInit(){
this.PersonData = new Person();
this.PersonData.firstName = "David";
}

//more code here...

}

ChildComponent.ts:

@Component({
    selector:'child-ponent',
    template:`
    <h1>child ponent</h1>
    <div *ngIf="personData">{{personData.firstName}}</div>
    `
    })
export class ChildComponent{
    @Input() personData:Person;        

    //more code here...

 }

The issue is: in some place in the parent ponent, when specific event occurs, a function newPersonArrived(newPerson:PersonData) is being called, the function code is as following:

newPersonArrived(newPerson:Person){
    this.PersonData = newPerson;
    }

This doesn't affect the UI with the new person name!

Only the following helps:

newPersonArrived(newPerson:Person){
    this.PersonData = new Person();
    this.PersonData.firstName = newPerson.firstName;
    }

Is this the expected behavior?

why only when the personData is initialized to new Person, the UI "catches" the change?

There are 2 ponents: parentComponent and ChildComponent, which is defined inside the parent. In the parentComponent there is a local variable which is used as value to pass to an input property of the ChildComponent (using a getter).

ParentComponent.ts:

@Component({
selector:'parent-ponent',
template:`
<h1>parent ponent</h1>
<child-ponent [personData]="PersonData"></child-ponent>
`
})
export class ParentComponent{
personData:Person;

get PersonData():Person{
return this.personData;
}

set PersonData(person:Person){
this.personData = person;
}

ngOnInit(){
this.PersonData = new Person();
this.PersonData.firstName = "David";
}

//more code here...

}

ChildComponent.ts:

@Component({
    selector:'child-ponent',
    template:`
    <h1>child ponent</h1>
    <div *ngIf="personData">{{personData.firstName}}</div>
    `
    })
export class ChildComponent{
    @Input() personData:Person;        

    //more code here...

 }

The issue is: in some place in the parent ponent, when specific event occurs, a function newPersonArrived(newPerson:PersonData) is being called, the function code is as following:

newPersonArrived(newPerson:Person){
    this.PersonData = newPerson;
    }

This doesn't affect the UI with the new person name!

Only the following helps:

newPersonArrived(newPerson:Person){
    this.PersonData = new Person();
    this.PersonData.firstName = newPerson.firstName;
    }

Is this the expected behavior?

why only when the personData is initialized to new Person, the UI "catches" the change?

• javascript
• angular
• ngonchanges

Share Follow edited May 9, 2017 at 6:23 tanmay 7,91122 gold badges2323 silver badges3939 bronze badges asked May 9, 2017 at 6:23 BatshevaBatsheva 66944 gold badges1313 silver badges3030 bronze badges 6

• Where do you call newPersonArrived? It should work – yurzui Commented May 9, 2017 at 6:26
• After some event occurs in the parent ponent, I see that the functin is being called (I put there console.log('aa') and saw it was printed) – Batsheva Commented May 9, 2017 at 6:28
• plnkr.co/edit/0SVsezfJYtc0xzKGkAZe?p=preview – yurzui Commented May 9, 2017 at 6:28
• I see the example, so do you mean this is depends from which event I am ing? sounds interesting – Batsheva Commented May 9, 2017 at 6:46
• I don't know exactly. To better understand it we need some working example – yurzui Commented May 9, 2017 at 6:48

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 7

please watch for your changes in child ponent

import { Component, Input, Output, OnChanges, EventEmitter, SimpleChanges } from '@angular/core';

@Component({
    selector:'child-ponent',
    template:`
    <h1>child ponent</h1>
    <div *ngIf="personData">{{personData.firstName}}</div>
    `
    })
export class ChildComponent implements OnChanges{
    @Input() personData:Person; 
     public ngOnChanges(changes: SimpleChanges) {
          if ('personData' in changes) {
              //some code here
           }
      }       

    //more code here...

 }

本文标签： javascriptAngular 4 Input property update does not affect the UIStack Overflow