Question

我有一个父组件，它通过* 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

Answer 1

所以我终于找到了答案。该属性没有更改，因为我不得不使用@ViewChildren（因为我的子组件多次通过* ngFor实例化），而不是@ViewChild。

在ngFor中，我必须添加一个索引才能通过索引访问我的viewChildren。如果有人想看代码，请问，我可以分享。

@ViewChild中的属性不会在父组件中更新

1 个答案: