html - Angular 9 - Checkboxvärde uppdateras inne i komponenten men blir inte markerad i användargränssnittet

Efter att ha uppgraderat mitt projekt från Angular 8 till 9 har jag stött på vissa problem i användargränssnittet. Det som jag verkar inte kunna lista ut är det faktum att kryssrutorna inte blir 'markerade' när deras värde är sant.

Här är HTML för kryssrutan

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

Jag lämnar här innehållet i min package.json ifall någon kan påpeka att jag använder något beroende som kan generera denna bugg

"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"
  }

Med användning av en (click)-metod fick jag värdet på kryssrutan utskrivet i konsolen och jag ser att det är antingen sant eller falskt, så det fungerar i komponenten.

Svar #1

Försök att rendera om kryssrutan.

Jag hade ett problem att den interna renderingsstatusen för kryssrutan inte är densamma som du skickar in till dem.

Svar #2

Uppdatering. Av någon anledning uppdaterar passering av argumentet "checked" eller "ngModel" med en variabel komponenten men inte användargränssnittet. Jag löste problemet genom att använda tvåvägsbindning [(ngModel)] och direkt passera referensen till formulärkontrollens värde:

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