更新到 Angular 12 ng2-nouislider 不工作

Question

从 angular 11.2.6 更新到 angular 12.2.7 后，与 nouislider 组件的绑定不再有效。运行 ng serve 打印此错误：

The property and event halves of the two-way binding 'ngModel' are not bound to the same target.

在全新安装中使用 ng2-nouislider 它工作正常。

app.module.ts

  import { NouisliderModule } from 'ng2-nouislider';
     
  imports: [
      FormsModule,
      MatInputModule,
      NouisliderModule, 
    ...
    ]

在组件中

<nouislider [(ngModel)]="test"></nouislider>

我已经尝试重新安装 ng2-nouislider 和 nouislider 包并清除了 npm 缓存。

package.json

{
  "name": "test-project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.2.8",
    "@angular/cdk": "^12.2.8",
    "@angular/common": "~12.2.8",
    "@angular/compiler": "~12.2.8",
    "@angular/core": "~12.2.8",
    "@angular/forms": "~12.2.8",
    "@angular/material": "^12.2.8",
    "@angular/platform-browser": "~12.2.8",
    "@angular/platform-browser-dynamic": "~12.2.8",
    "@angular/router": "~12.2.8",
    "@angular/service-worker": "~12.2.8",
    "@mapbox/mapbox-gl-draw": "^1.3.0",
    "@mapbox/mapbox-gl-draw-static-mode": "^1.0.1",
    "@ngx-pwa/local-storage": "^12.1.0",
    "@turf/center-median": "^6.5.0",
    "@turf/turf": "^6.5.0",
    "@types/d3": "^6.7.5",
    "@types/geojson": "^7946.0.8",
    "@types/mapbox-gl": "^2.4.2",
    "bootstrap": "^4.6.0",
    "bowser": "^2.11.0",
    "compressorjs": "^1.1.0",
    "d3": "^6.7.0",
    "entropy-string": "^4.2.0",
    "exifr": "^6.3.0",
    "mapbox-gl": "^2.5.0",
    "material-design-icons": "^3.0.1",
    "nanoid": "^3.1.28",
    "ng2-nouislider": "^1.8.2",
    "ngx-material-timepicker": "^5.5.3",
    "nouislider": "^14.6.3",
    "rxjs": "~6.6.7",
    "tslib": "^2.3.1",
    "typescript": "~4.3.2",
    "uuid": "^8.3.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.7",
    "@angular-eslint/builder": "12.5.0",
    "@angular-eslint/eslint-plugin": "12.5.0",
    "@angular-eslint/eslint-plugin-template": "12.5.0",
    "@angular-eslint/schematics": "12.5.0",
    "@angular-eslint/template-parser": "12.5.0",
    "@angular/cli": "~12.2.7",
    "@angular/compiler-cli": "~12.2.8",
    "@types/jasmine": "~3.6.11",
    "@types/mapbox__mapbox-gl-draw": "^1.2.3",
    "@types/node": "^12.20.27",
    "@typescript-eslint/eslint-plugin": "4.28.2",
    "@typescript-eslint/parser": "4.28.2",
    "eslint": "^7.26.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.2",
    "karma": "~6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0"
  }
}

Answer 1

如下图所示，该库的最新 Angular 版本是 4.4.1，早于 Angular Ivy。预计不会与 Angular 12.

无缝工作

但是您有更好的解决方案。您可以复制粘贴 GitHub 项目中的组件代码并将其放入您自己的项目中。这是一个相对简单的组件，因此迁移它不会很困难。您还将拥有不再担心依赖性的优势，这使得它更易于维护。

您可以在此处查看组件的代码：https://github.com/tb/ng2-nouislider/tree/master/src

更新到 Angular 12 ng2-nouislider 不工作

update to Angular 12 ng2-nouislider not working

nouislider

angular

two-way-binding

angular12