Question

我有一个像这样定义的PrimeNG下拉列表

<p-dropdown id="businessType" name="businessType" required placeholder="select one"
            [style]="{'width': '100%'}" [styleClass]="hasError(ideaInitiatedForm?.controls?.businessType)"
            [options]="businessTypes" [(ngModel)]="stage.BusinessType"></p-dropdown>

此组件的定义如下

export class IdeaInitiatedComponent implements OnInit {
    businessTypes: SelectItem[] = [];

ngOnInit(): void {
        this.loadReferenceList(this.businessTypesService.get, this.businessTypesService, this.businessTypes);
    }

loadReferenceList(loadMethod: () => Observable<string[]|Points[]>, service: any, lookupList: SelectItem[]): any {
        const method = loadMethod.bind(service);

        method()
            .subscribe(((items: string[] | Points[]) => {
                _.each(items,
                    (item: string|Points) => {
                        const label = item.hasOwnProperty('description') ? (item as Points).description : item as string;
                        const value = item.hasOwnProperty('points') ? (item as Points).points.toString() : item as string;

                        lookupList.push({ label: label, value: value });
                    });
            }));
    }

    constructor(private readonly pointsService: PointsService, private readonly pppcaTypesService: PppcaTypesService,
        private readonly pppcaSubTypesService: PppcaSubTypesService, private readonly businessTypesService: BusinessTypesService,
        private readonly businessSubTypesService: BusinessSubTypesService, private readonly projectValuesService: ProjectValuesService,
        private readonly strategiesService: StrategiesService, private readonly strategicTacticalTypesService: StrategicTacticalTypesService,
        private readonly channelsService: ChannelsService, private readonly businessUnitsService: BusinessUnitsService) { }

}

业务单位服务的结构如下

@Injectable() 
export class BusinessTypesService extends BaseLookupService<string> {

    constructor(http: Http) {
        super(http, 'api/businessTypes/');
    }

}

export class BaseLookupService<T> {

    constructor(private readonly http: Http, private readonly baseApiUrl: string) { }

    private items: T[];

    get(): Observable<T[]> {
        if (this.items) {
            return Observable.of(this.items);
        }

        return this.http.get(this.baseApiUrl + 'Get')
            .map((res: Response) => {
                this.items = this.extractData(res);
                return this.items;
            })
            .catch(this.handleError);
    }

    private extractData(res: Response) {
        const rspObject = res.json();
        return rspObject || {};
    }

    private handleError(error: Response | any) {
        const errMsg = 'Error with Business Types service API response.';
        return Observable.throw(errMsg);
    }

}

发生的事情是，当首先加载主要信息时，即stage.BusinessType，然后在下拉列表的标签部分中没有选择任何内容。如果首先加载选项，那么一切都按预期工作。

如果我在下拉周围的div上放置一个ngIf，直到加载选项后才会显示它，那么一切都可以正常工作，但我不喜欢看起来那样。

如何让选项正常工作。我正在使用PrimeNG的4.2.1版本 “primeng”：“^ 4.2.1”，

设置模型后加载选项时，PrimeNG下拉列表未选择项目

0 个答案: