我＆＃39;仅在当前子组件的父级中更新属性时出现问题，我面临的行为是，当我尝试从子组件修改/更新父级中的属性时，不仅父级而是父级＆＃39兄弟姐妹也被改变了，我做错了什么，我怎样才能实现只更新孩子的父母？，我的代码在下面
parent.component.html
<div *ngSwitchCase="'active'">
<accordion *ngIf="PhasesForDirective !== undefined">
<accordion-group *ngFor="let phase of PhasesForDirective" [panelClass]="customClass" [isOpen]="true">
<div accordion-heading>
{{phase.name | uppercase}}
<div class="pull-right float-xs-right"><input [(ngModel)]="totalHoursPhase" name="total" ngDefaultControl/> Horas de vuelo</div>
</div>
<div class="duties">
Duties: Alumno: <strong>{{phase.dutieStudent}}</strong>, Instructor: <strong>{{phase.dutieInstructor}}</strong> <em>Máximo de horas al día.</em>
</div>
<fly-types (AddHours)="onAddHours($event)" phaseID = {{phase.id}}></fly-types>
</accordion-group>
</accordion>
parent.component.ts
export class component2Component implements OnInit, OnChanges {
@Input() directiveInput: DirectiveModel;
private PhasesForDirective: Array<PhaseModel>;
private totalHoursPhase:number;
private status: string ;
constructor(private _directiveService: directiveService) { }
ngOnInit(){
}
ngOnChanges() {
if (this.directiveInput !== undefined) {
this.status = 'loading';
this._directiveService.getPhasesDirective(this.directiveInput.id)
.then(phases => this.extractPhases(phases));
}
}
onAddHours(event:number){
this.totalHoursPhase = event;
console.log('horas desde el 3',this.totalHoursPhase);
}
extractPhases(phases: any):void{
this.PhasesForDirective = phases;
console.log(phases);
this.status = 'active';
}
}
child.component.html
<div *ngFor="let tv of FlyTypesList" class="row tuplaRow">
<div class="col-sm-4">
orden
<input id="{{tv.id}}" type="text" value="{{tv.order}}" class="form-control type">
</div>
<div class="col-sm-4">tipo de vuelo
<input type="text" value="{{tv.type}}" class="form-control type" disabled>
</div>
<div class="col-sm-4">Horas <input #inputHours type="text" id="{{tv.id}}" value="{{tv.hours}}" (click)="updateHoursTV($event, inputHours)" class="form-control totalNumberTV"></div>
</div>
<div class="row tuplaRow" *ngIf="creatingNew">
<h4>Agregar tipo de vuelo</h4>
<pre>{{addNewTypeForm.value | json }}</pre>
<form #addNewTypeForm="ngForm" (submit)="onSubmit($event, addNewTypeForm.value)">
<div class="row tuplaRow">
<div class="col-sm-4">
orden
<input #order [(ngModel)]="newTypePhase.order" name="order" type="text" placeholder="Ingrese el orden" class="form-control type">
</div>
<div class="col-sm-4">tipo de vuelo
<select #type [(ngModel)]="newTypePhase.name" name="name" class="phasesSelect">
<option *ngFor="let option of options" value="{{option.id}}" id="{{option.id}}">{{option.name}}</option>
</select>
</div>
<div class="col-sm-4">Horas <input [(ngModel)]="newTypePhase.hours" name="hours" #hours type="text" placeholder="0" required class="form-control totalNumberTV"></div>
</div>
<div class="row">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-ok-sign"></i>Guardar</button>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-2">
<button class="btn btn-info newTypeFlight" (click)="addNewForm()">Nuevo</button>
</div>
</div>
</div>
child.component.ts
export class FlyTypesComponent implements OnInit, OnChanges {
options: TypeFlightModel[];
@Input() phaseID: number;
private FlyTypesList:Array<TypeFlightPhaseModel>;
private newTypePhase: TypeFlightPhaseModel = new TypeFlightPhaseModel();
private creatingNew: boolean = false;
private totalHoursPhase: number;
@Output() AddHours = new EventEmitter<number>();
constructor(private dragulaService: DragulaService,
private _directiveService: directiveService) {}
ngOnInit() {
this.totalHoursPhase = 0;
this.getDataTypeFligth();
}
updateHoursTV(event: any, inputHours: HTMLElement):void{
}
addNewForm(){
this.creatingNew = true;
}
ngOnChanges() {
}
private getDataTypeFligth(){
this._directiveService.getTypeFligthPhase(this.phaseID)
.then(response => {
response.forEach(itemPhase => {
this.totalHoursPhase += itemPhase.hours;
console.log(this.totalHoursPhase);
});
this.AddHours.emit(this.totalHoursPhase);
this.FlyTypesList = response;
this.options = response[0].Types;
});
}
onSubmit(event, formValue):void{
event.preventDefault();
let newTV = new TypeFlightPhaseModel();
this._directiveService.addTypeFlightToPhase(this.phaseID, formValue.name, formValue.hours)
.then(response => {
console.log(response)
newTV.hours = formValue.hours;
newTV.type = formValue.name;
newTV.order = 1;
this.FlyTypesList.push(newTV);
this.AddHours.emit(formValue.hours);
});
}
}
基本上我希望当我在子组件表单中创建一个新元素时，它只更新其父元素值。
一些帮助会很棒!!
答案 0 :(得分：0)