problem description
in https://www.angular.cn, the parent component passes the value to the child component with one-way binding. In this case, @ input, is used instead of @ output,. But when I modify the value in the input in the child component, I also change the value of the specified li element in the parent component. At this time, how to prevent the parent component value from being modified
related codes
parent component ts:
import {Component, OnInit} from"@ angular/core";
import {HEROES} from".. / mock-data";
@ Component ({
selector: "app-show-value",
templateUrl:". / show-value.component.html",
styleUrls: [". / show-value.component.css"]
})
export class ShowValueComponent implements OnInit {
para: Hhh = {/ / in oninit only object inheritance is followed by object assignment. Object declaration should be performed with constructor outside oninit
id: 1,
name: "ww"}
ok: string;
heros = mockdata
selectedHero: Hhh;
constructor () {
}
ngOnInit () {
this.ok = "ss";}
onselect (hero2: Hhh): void {
this.selectedHero = hero2;}
}
export class Hhh {
id: number;
name: string;
}
/ /
html
< div class = "showValue" >
component id number: {{para.id}}
component name: {{para.name | uppercase}}
< input type= "text "[(ngModel)] =" para.name "placeholder=" name ">
< ul class=" herosStyle ">
<li *ngFor="let herolist of heros" (click)="onselect(herolist)">
<span>{{herolist.name}}</span>
</li>
< / div >
/ /
subcomponent html:
< div * ngIf= "hero2" >
< / div >
/ / /
Sub-component ts:
import {Component, Input, OnInit} from"@ angular/core";
/ / import {Hhh} from".. / show-value/show-value.component";
@ Component ({
selector: "app-show-value-detail",
templateUrl:". / show-value-detail.component.html",
styleUrls: [". / show-value-detail.component.css"]
})
export class ShowValueDetailComponent implements OnInit {
@ Input ()
private hero2: Hhh2;
constructor () {}
ngOnInit () {
setInterval(() => {
this.hero2.name = "sss";
});}
}
export class Hhh2 {
id: number;
name: string;
}