html - Angular 9 - 复选框的值在组件内更新但在 UI 中未被选中

在将我的项目从 Angular 8 升级到 9 之后，我在用户界面上遇到了一些问题。其中一个我似乎无法解决的问题是，当复选框的值为 true 时，它们没有被“选中”。

这是复选框的 HTML

 <input disabled type="checkbox" style="width: 20px;height: 20px;margin-top: 35px;" class="form-control"
            formControlName="checkboxToCheck">

我会在这里留下我的 package.json 的内容，以防有人能指出我正在使用某个可能导致此错误的依赖项

"dependencies": {
    "@angular/animations": "^9.0.1",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "^9.0.1",
    "@angular/compiler": "^9.0.1",
    "@angular/core": "^9.0.1",
    "@angular/forms": "^9.0.1",
    "@angular/http": "^7.2.16",
    "@angular/localize": "^9.1.13",
    "@angular/material": "^9.0.0",
    "@angular/platform-browser": "^9.0.1",
    "@angular/platform-browser-dynamic": "^9.0.1",
    "@angular/router": "^9.0.1",
    "@ng-bootstrap/ng-bootstrap": "^6.2.0",
    "@ng-select/ng-select": "3.7.2",
    "@ngx-translate/core": "11.0.0",
    "@ngx-translate/http-loader": "4.0.0",
    "@types/html2canvas": "^1.0.0",
    "angular2-toaster": "^7.0.0",
    "chart.js": "^2.8.0",
    "core-js": "^2.5.4",
    "dom-to-image": "^2.6.0",
    "file-saver": "^2.0.2",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "html-to-pdfmake": "^2.4.9",
    "html2canvas": "^1.4.1",
    "igniteui-angular": "^9.0.0",
    "jquery": "^3.3.1",
    "jspdf": "^2.5.1",
    "moment": "^2.27.0",
    "ng2-charts": "~2.2.3",
    "ngx-custom-validators": "^6.0.0",
    "ngx-gallery-9": "^1.0.6",
    "pdfmake": "^0.2.6",
    "popper.js": "^1.14.4",
    "querystring": "^0.2.1",
    "rxjs": "~6.5.4",
    "webpack": "^4.39.0",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.2",
    "@angular/cli": "~9.0.2",
    "@angular/compiler-cli": "^9.0.1",
    "@angular/language-service": "^9.0.1",
    "@nativescript/schematics": "^9.0.0",
    "@types/jasmine": "~3.5.4",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "~13.7.1",
    "codelyzer": "<7.0.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.12.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslib": "^1.10.0",
    "tslint": "~5.11.0",
    "typescript": "3.8.3",
    "webpack-dev-server": "^5.0.1"
  }

通过使用 (click) 方法，我让复选框的值在控制台打印出来，我看到它要么是 true 要么是 false，所以它在组件中工作正常。

答案＃1

尝试重新渲染复选框。

我遇到的一个问题是复选框的内部渲染状态与您传入的状态不一样。

答案＃2

更新。由于某种原因，传递参数 "checked" 或 "ngModel" 与变量会更新组件但不会更新界面。我通过使用双向绑定 [(ngModel)] 并直接传递表单控件值的引用解决了这个问题：

[(ngModel)]="this.myForm.controls['checkboxName'].value"