Использование 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>
Выбрать компоненткод:
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);
}
}