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

如何解决ng0100 expressionchangedafterithasbeencheckederror with ng-select (@ng-select/ng-select)

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

---

代码片段

使用 FormBuilder 构建表单

constructor( private formBuilder: FormBuilder) {}

在这个片段中，我们将表单减少到只有一个表单控件（‘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>

解决方法

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

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