我有一个父组件,它通过* ngFor创建子组件的实例。在我的子组件中,我需要在父组件中使用两个属性。
当属性一次更新后,父级将获得更新,但是当进行第二次更新时,属性值在父级组件中将保持不变。
这是我的父组件:
@Component({
selector: 'app-events-feed',
templateUrl: './events-feed.component.html',
styleUrls: ['./events-feed.component.css']
})
export class EventsFeedComponent implements OnInit {
private events: Events[];
participation: Participations;
leaveAnyway: string;
iconSport: string;
@ViewChild(DetailsEventsComponent) details: DetailsEventsComponent;
constructor() { }
saveChanges(ev: Events): void {
let dateEvenement=new Date(ev.dateEvent);
dateEvenement.setHours(this.details.hourBegin.getHours());
dateEvenement.setMinutes(this.details.hourBegin.getMinutes());
}
HTML代码:
<mat-list *ngFor="let ev of events">
<div id="eventContainer">
<app-details-events [event]="ev"></app-details-events>
</div>
</mat-list>
以下是子组件:
@Component({
templateUrl: './details-events.component.html',
styleUrls: ['./details-events.component.css']
})
export class DetailsEventsComponent implements OnInit {
ngOnInit(): void {
}
@Input() event: Events;
hourBegin: Date;
dateEnd: Date;
}
HTML代码:
<tr>
<td class=time >
<mat-label>Begin</mat-label>
<igx-time-picker id="begin" [(ngModel)]="hourBegin" format="HH:mm" [vertical]="true" [disabled]=!event.isAdmin>
</igx-time-picker>
</td>
<td class=time>
<mat-label>End</mat-label>
<igx-time-picker id="end" [(ngModel)]="dateEnd" format="HH:mm" [vertical]="true" [disabled]=!event.isAdmin >
</igx-time-picker>
</td>
我第一次通过TimePicker(在Child组件中)更改时间时,该值已在父组件中正确接收。但是,当我再次尝试更改时间选择器中的时间时,即使视图改变了,模型也没有改变。我是Angular的新手,所以也许很明显,但是我做得不正确?
感谢那些会阅读并可能回答的人。如果您认为需要更多说明/代码来理解问题,请告诉我。
祝你有美好的一天,
Lio
答案 0 :(得分:0)
所以我终于找到了答案。该属性没有更改,因为我不得不使用@ViewChildren(因为我的子组件多次通过* ngFor实例化),而不是@ViewChild。
在ngFor中,我必须添加一个索引才能通过索引访问我的viewChildren。如果有人想看代码,请问,我可以分享。