Question

我有两个mat-selection绑定到从服务接收的数组。第二个绑定到第一个选定的对象属性，它是一个数组。这一切都很好，但是当我在html中使用ngFor循环时，不止一次显示这个组件。第二个mat-select保持它的值，但是在显示新组件之后第一个丢失了它的值，我无法弄清楚原因。 selectedService对象保留我选择的值并显示，但不会显示在mat-select选定值中。

编辑：我认为这与获取serviceGroups的服务有关，因为当添加下一个组件并从API返回serviceGroups时，该值会丢失。这就是我在子组件中获取服务的方式。

  ngOnInit() {
this.serviceGroupService.serviceGroups.subscribe(sg => {
  this.serviceGroups = sg;
});
this.serviceGroupService.GetServiceGroups().subscribe();
}

如果我在另一个页面上获得服务然后导航回到此处，那么

评论this.serviceGroupService.GetServiceGroups().subscribe();行可以正常工作，然后mat选择保留它们的值。

更新：我已将this.serviceGroupService.GetServiceGroups().subscribe();移动到父组件中，因此只需调用一次，但在子组件中保留this.serviceGroupService.serviceGroups.subscribe(sg => { this.serviceGroups = sg; });。

我认为订阅serviceGroups observable并获取子组件中的服务组导致在初始化子组件时刷新它们，如果有人可以确认，那就太好了。

组件html：

 <div class="row">
    <div class="col-md-6 col-12">
      <mat-form-field>
        <mat-select placeholder="Select a service" required (change)="changeService($event.value)">
          <mat-optgroup *ngFor="let serviceGroup of serviceGroups" [label]="serviceGroup.serviceGroupName">
            <mat-option *ngFor="let service of serviceGroup?.services" [value]="service">
              {{service?.serviceName}}
            </mat-option>
          </mat-optgroup>
        </mat-select>
      </mat-form-field>
    </div>

    <div class="col-md-6 col-12">
      <mat-form-field>
        <mat-select placeholder="Select a time" required [disabled]="!selectedService" (change)="changeServiceTime($event.value)">
          <mat-option *ngFor="let serviceTime of selectedService.serviceTimes" [value]="serviceTime">
            {{serviceTime?.durationId}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
  </div>

父组件html：

 <div *ngFor="let serviceTime of booking.bookingServiceTimes">
              <app-select-service (selectedServiceTimeEvent)="receiveSelectedServiceTime($event)"></app-select-service>
            </div>

mat-select多次添加相同组件时丢失选定的值

0 个答案: