Angular: Type checking in templates not working correctly

Question

Since some time the type checking does not work in the templates of Angular in VSCode.

I have the following code:

<div *ngIf="activeProperty" class="mx-3">
    <!-- some other code -->
    <input
        required
        id="propertyName"
        type="text"
        class="form-control"
        name="propertyName"
        [ngModel]="activeProperty.uiProperty.label"
        (ngModelChange)="updateLabelAndKeyInSpec($event)"
    />
</div>

Now at this line:

[ngModel]="activeProperty.uiProperty.label"

activeProperty is underlined, telling me that The expression might be null which is clearly wrong because I'm checking that by the *ngIf above.

Please see my ng --version here:

    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.6
Node: 12.7.0
OS: win32 x64
Angular: 8.2.8
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.6
@angular-devkit/build-angular     0.803.6
@angular-devkit/build-optimizer   0.803.6
@angular-devkit/build-webpack     0.803.6
@angular-devkit/core              8.3.6
@angular-devkit/schematics        8.3.6
@angular/cdk                      8.2.2
@angular/cli                      8.3.6
@angular/http                     7.2.15
@ngtools/webpack                  8.3.6
@schematics/angular               8.3.6
@schematics/update                0.803.6
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

Am I doing something wrong?

Answer 1

我无法详细告诉你为什么它*ngIf下划线......也许是因为它不知道*ngIf左右......但这应该可以解决问题：

[ngModel]="activeProperty?.uiProperty?.label"

Answer 2

你可以使用 activeProperty!.uiProperty!.label

Answer 3

[(ngModel)]="activeProperty.uiProperty.label"

你能试试这个吗？