ng0100 expressionchangedafterithasbeencheckederror with ng-select (@ng-select/ng-select)答案

【问题标题】：ng0100 expressionchangedafterithasbeencheckederror with ng-select (@ng-select/ng-select)ng0100 expressionchangedafterithasbeencheckederror with ng-select (@ng-select/ng-select)
【发布时间】：2021-09-15 07:39:09
【问题描述】：

我曾说过表单中的下拉菜单错误。我偶然发现了堆栈上的以下问题：See discussion over ng0100 and angular lifecycle，并试图解决它不同的生命周期操作、更改检测等...。无济于事。除此之外，我警告说我仍在弃用的 FormControl 中使用 NgModel。我在 ng-select (https://www.npmjs.com/package/@ng-select/ng-select) 的文档中检查了这一点，但发现他们的指导方针仍然暗示在 Formcontrol 中使用 NgModel。

代码 sn-ps

使用 FormBuilder 构建表单

constructor( private formBuilder: FormBuilder) {}

在这个 sn-p 中，我们将表单简化为一个表单控件（'myDropdown'）

private initializeForm () { 
        this.validationService = new ValidationPatternService();
        
        this.searchForm = this.formBuilder.group({
            myDropdown: ['']
        });
    }

用于填充下拉列表的项目（称为位置类型）定义为：

locationtypes: KeyValuePair<number, string>[];
    private _selectedlocationtype: locationtypeEnum;
    get selectedlocationtype(): locationtypeEnum {
        return this._selectedlocationtype;
    };
    set selectedlocationtype(value: locationtypeEnum) {
        if (this._selectedlocationtype !== value && value != null) {
            this._selectedlocationtype = value;
        }
        if (value == null) { this._selectedlocationtype = locationtypeEnum._;}        
    }

在 Html 模板中我们有：

<form class="form-horizontal" [formGroup]="searchForm" (ngSubmit)="onSubmit()">
<div >
<ng-select [(ngModel)]="selectedlocationtype" [items]="locationtypes"
bindValue="key" bindLabel="value" formControlName=" myDropdown "
             id="locationtype"
</ng-select>
                                        
                                    </div>
                                </form>

【问题讨论】：

标签： angular error-handling angular-ngselect

【解决方案1】：

最后，通过将 NgModel 从双向绑定减少为从视图到数据源的单向绑定，完成了这项工作。 [items] 负责从数据到视图的必要通信。

<ng-select (ngModel)="selectedlocationtype"</ng-select>

【讨论】：