Issue
since I am using spread operator, my changes not reflecting to child component. what is the correct way to handle this?
code in child:
import {
Component,
Input,
OnChanges,
OnInit,
SimpleChange,
} from '@angular/core';
@Component({
selector: 'my-child',
template: `
<h1>{{Nwname}}</h1>
<ul>
<li *ngFor="let item of updatedRows">{{item.TelephoneNo}}</li>
</ul>
`,
styles: [],
})
export class ChildComponent implements OnInit {
@Input() Nwname;
@Input() Nwrows;
updatedRows;
ngOnInit() {
const rows = [...this.Nwrows];
this.updatedRows = rows; //updateds only once
}
}
Solution
In the example, you are assigning a new array to this.rows, so that will trigger change detection, I think your problem is that you are overring the main dataset, can try the below code
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular';
rows;
dataset = [
{
AbbottPersonnel: 'Daavid Malan',
TelephoneNo: '123',
ActivationStatus: 'Inactive',
},
{
AbbottPersonnel: 'Sharon Grant',
TelephoneNo: '122',
ActivationStatus: 'Active',
},
{
AbbottPersonnel: 'Yegeny Kafalnikov',
TelephoneNo: '122',
ActivationStatus: 'Active',
},
{
AbbottPersonnel: 'Masake Akase',
TelephoneNo: '123',
ActivationStatus: 'Active',
},
];
constructor() {
this.rows = [...this.dataset]
}
updateSearch(Nwvalue) {
if (!Nwvalue) {
console.log('now vlaue', this.copy);
this.rows = [...this.dataset];
return;
}
const filtered = this.dataset.filter((record) => {
return Object.values(record).some((value) => value.includes(Nwvalue));
});
console.log('filtered', filtered);
this.rows = filtered;
}
}
Answered By - Mr. Stash
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.