javascript - Update view on ngOnChanges from @Input in Angular - Stack Overflow

admin管理员组

文章数量:1332873

I have a @Input property in my child ponent of type Person and I'm passing the object from the parent ponent through an attribute

Full working code is available in StackBlitz

I explored the following question I got the point that what they told in the answer but I tried the Object.assign and other things based on the answer but it fails to load the data in View.

• Angular: ngOnChanges not updating value

How can I pass the Object through @Input and how can I do some manipulation once the object reached to the child ponent and need to update in the view?

Sample Code:

App Component:

import { Component } from '@angular/core';

import { Person } from './models/person'

@Component({
  selector: 'my-app',
  templateUrl: './appponent.html',
  styleUrls: [ './appponent.css' ]
})
export class AppComponent  {
  person: Person = {
    firstName: 'Emma',
    lastName: 'Watson'
  };
}

App Component HTML:

<user [user-profile]="person"></user>

User Component:

import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Person } from '../models/person';

@Component({
  selector: 'user',
  templateUrl: './userponent.html',
  styleUrls: ['./userponent.css']
})
export class UserComponent implements OnInit, OnChanges {

  @Input('user-profile') profile: Person;

  person: Person;

  constructor() {}

  ngOnInit() { 
    this.person = {
      firstName: '',
      lastName: ''
    }
  }

  ngOnChanges(changes:SimpleChanges): void { 
    if(typeof this.profile !== 'undefined' 
      && typeof this.profile.firstName !== 'undefined' 
      && typeof this.profile.lastName !== 'undefined') {
        this.person.firstName = this.profile.firstName;
        this.person.lastName = this.profile.lastName;
    }
  }

}

User Component HTML:

Full Name: {{person.firstName}} {{person.lastName}}

I need to do some manipulation once I received the object from @Input and need to update it in the UI. I know the object is passing as reference but here I tried with Object.assign and I assigned the property with undefined and then the appropriate object nothing is working.

I have a @Input property in my child ponent of type Person and I'm passing the object from the parent ponent through an attribute

Full working code is available in StackBlitz

I explored the following question I got the point that what they told in the answer but I tried the Object.assign and other things based on the answer but it fails to load the data in View.

• Angular: ngOnChanges not updating value

How can I pass the Object through @Input and how can I do some manipulation once the object reached to the child ponent and need to update in the view?

Sample Code:

App Component:

import { Component } from '@angular/core';

import { Person } from './models/person'

@Component({
  selector: 'my-app',
  templateUrl: './app.ponent.html',
  styleUrls: [ './app.ponent.css' ]
})
export class AppComponent  {
  person: Person = {
    firstName: 'Emma',
    lastName: 'Watson'
  };
}

App Component HTML:

<user [user-profile]="person"></user>

User Component:

import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Person } from '../models/person';

@Component({
  selector: 'user',
  templateUrl: './user.ponent.html',
  styleUrls: ['./user.ponent.css']
})
export class UserComponent implements OnInit, OnChanges {

  @Input('user-profile') profile: Person;

  person: Person;

  constructor() {}

  ngOnInit() { 
    this.person = {
      firstName: '',
      lastName: ''
    }
  }

  ngOnChanges(changes:SimpleChanges): void { 
    if(typeof this.profile !== 'undefined' 
      && typeof this.profile.firstName !== 'undefined' 
      && typeof this.profile.lastName !== 'undefined') {
        this.person.firstName = this.profile.firstName;
        this.person.lastName = this.profile.lastName;
    }
  }

}

User Component HTML:

Full Name: {{person.firstName}} {{person.lastName}}

I need to do some manipulation once I received the object from @Input and need to update it in the UI. I know the object is passing as reference but here I tried with Object.assign and I assigned the property with undefined and then the appropriate object nothing is working.

• javascript
• angular
• javascript-objects
• angular-ponents
• ngonchanges

Share Improve this question Follow edited Apr 3, 2019 at 13:47 user11281949 10566 bronze badges asked Apr 3, 2019 at 12:33 B.BalamanigandanB.Balamanigandan 4,8751212 gold badges7676 silver badges139139 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Remove the asignment of person from ngOnInit(), ngOnInit runs after ngOnChanges so you are restting the values back to empty

export class UserComponent implements OnInit, OnChanges {

  @Input('user-profile') profile: Person;

  person: Person = { firstName: '', lastName: '' };  // initialize it here

  constructor() {}

  ngOnInit() { 
    // this.person = {
    //   firstName: '',
    //   lastName: ''
    // }
  }

  ngOnChanges(changes:SimpleChanges): void { 



    if(typeof this.profile !== 'undefined' 
      && typeof this.profile.firstName !== 'undefined' 
      && typeof this.profile.lastName !== 'undefined') {
        console.log(this.profile)
        this.person.firstName = this.profile.firstName;
        this.person.lastName = this.profile.lastName;
        console.log(this.person)
    }
  }

}

https://stackblitz./edit/angular-input-ng-onchange-qiyghn?file=src%2Fapp%2Fuser%2Fuser.ponent.ts

It's because ngOnInit is ran after ngOnChanges. So you first set it, but then immediately reset it inside your ngOnInit.

See here a working example.

Basically change your ponent person attribute to this:

person: Person = {
  firstName: '',
  lastName: ''
};

and remove the ngOnInit.

You can also use a setter on the profile input, this way you don't need ngOnChanges:

@Input('user-profile') set profile(person: Person) {
  this.person.firstName = profile && profile.firstName || '';
  this.person.lastName = profile && profile.lastName || '';
}

person: Person = {
  firstName: '',
  lastName: ''
};

本文标签： javascriptUpdate view on ngOnChanges from Input in AngularStack Overflow