在网格的子组件中设置选定值。 Angular 2+

Question

使用 Angular 8 和 TypeScript。我有一个包含许多内部组件的网格，其中之一是 <ng-select/>

数据绑定是在子组件的OnInit中完成的。当数据加载初始化时，我看到所有值和过滤器都按预期工作，但它没有显示为选定项目。视觉上看起来它显示在 AAA - 绿色行中。只要我触摸并释放下拉菜单，就会选择正确的值。

父组件代码：

 <clr-dg-cell>
    {{staffedReferral?.agency?.displayName}}
    <span>
      <app-agency-rep-select 
        [agencyId]=staffedReferral?.agency?.id 
        [selectedAgencyRepId]=staffedReferral?.agencyRepId
        (change)="changeAgencyRep($event, staffedReferral)">
      </app-agency-rep-select>
    </span>
  </clr-dg-cell>

Select组件代码：

import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';

import { IAgencyRep } from '@core/model';
import { RootStoreState, AgencyRepStoreSelectors, AgencyRepStoreActions } from '@app/_root-store';
import { AgencyRepDataService } from '@core/api/agency-rep-data.service';


@Component({
  selector: 'app-agency-rep-select',
  template: `
    <ng-select
      [loading]="isLoading$ | async"
      [ngModel]="_agencyRep"
      [items]="reps"
      (ngModelChange)="onChange($event)"
      (open)="onOpen()"
      [placeholder]="placeholder || 'Agency Reps...'"
      bindLabel="fullName"
    >
    </ng-select>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AgencyRepSelectComponent implements OnInit {
  @Output() change: EventEmitter<IAgencyRep> = new EventEmitter();
  @Input() placeholder?: string;
  @Input() selectedAgencyRepId?: number;
  @Input() agencyId?: number;

  reps: IAgencyRep[] = [];
  _agencyRep: IAgencyRep;
  error$: Observable<string>;
  isLoading$: Observable<boolean>;

  constructor(private store$: Store<RootStoreState.State>, private dataService: AgencyRepDataService) {
  }

  ngOnInit(): void {
    this.dataService.getAgencyRepsByAgencyId<IAgencyRep[]>(this.agencyId)
      .subscribe(
        (data) => {
          data.forEach(d => d.fullName = d.user.firstName + ' ' + d.user.lastName);
          this.reps = data;
          if (this.selectedAgencyRepId) {
            this._agencyRep = data.find(d => d.id === this.selectedAgencyRepId);
          }
        }
      );
  }

  onOpen() {
  }

  onChange(agencyRep) {
    if (!agencyRep) {
      agencyRep = { id: null };
    }
    this.change.emit(agencyRep);
  }

}

Answer 1

问题出在 changeDetection 上。它应该是默认的，而不是 OnPush changeDetection: ChangeDetectionStrategy.默认

在网格的子组件中设置选定值。 Angular 2+

Set selected value in the sub component in the grid. Angular 2+

typescript

angular-ngselect

angular

angular8