Angular8 模板驱动表单抛出错误：TypeError：无法读取 Object.eval [as updateDirectives] 处未定义的属性“ProviderName”

Question

由引发错误驱动的模板。

    ProviderComponent.html:4 ERROR TypeError: Cannot read property 'ProviderName' of undefined
    at Object.eval [as updateDirectives] (ProviderComponent.html:4)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
    at checkAndUpdateView (core.js:44271)
    at callViewAction (core.js:44637)
    at execComponentViewsAction (core.js:44565)
    at checkAndUpdateView (core.js:44278)
    at callViewAction (core.js:44637)
    at execComponentViewsAction (core.js:44565)
    at checkAndUpdateView (core.js:44278)
    at callViewAction (core.js:44637)

   (anonymous) @ main.js:1
    ProviderComponent.html:4 ERROR TypeError: Cannot read property 'ProviderName' of undefined
    at Object.eval [as updateDirectives] (ProviderComponent.html:4)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
    at checkAndUpdateView (core.js:44271)
    at callViewAction (core.js:44637)
    at execComponentViewsAction (core.js:44565)
    at checkAndUpdateView (core.js:44278)
    at callViewAction (core.js:44637)
    at execComponentViewsAction (core.js:44565)
    at checkAndUpdateView (core.js:44278)
    at callViewAction (core.js:44637)

provider.component.html

    <div class="form-row">
        <div class="form-group col-6">
            <input class="form-control" name="ProviderName"  #ProviderName="ngModel" 
          [(ngModel)]="providerService.selectedProvider.ProviderName" placeholder="Provider Name" 
           required>
        </div>
        <div class="form-group col-6">
            <input type="text" class="form-control" name="ProviderType" #ProviderType="ngModel" 
           [(ngModel)]="providerService.selectedProvider.ProviderType">
        </div>
    </div>
       
    <div class="form-row">
        <div class="form-group col-6">
            <button type="submit" class="btn btn-lg btn-block btn-info">Submit</button>
        </div>
        <div class="form-group col-6">
            <button type="button" class="btn btn-lg btn-block btn-info" 
             (click)="resetForm(employeeForm)">Reset</button>
        </div>
    </div>

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { ProviderMainComponent } from './provider-main/provider-main.component';
    import { ProviderComponent } from './provider-main/provider/provider.component';
    import { ProviderListComponent } from './provider-main/provider-list/provider-list.component';
    import {FormsModule} from '@angular/forms';
    
    @NgModule({
      declarations: [
        AppComponent,
        ProviderMainComponent,
        ProviderComponent,
        ProviderListComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        AppRoutingModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

proivder.service.ts：

    import { Injectable } from '@angular/core';
    
    //Import the Provider Model
    import { Provider } from './provider.model';
    
    @Injectable({
      providedIn: 'root'
    })
    
    export class ProviderService {
      public selectedProvider:Provider; //Initialize the Provider Model
    
      constructor() { }
    }

提供者.component.ts：

    import { Component, OnInit } from '@angular/core';
    import { ProviderService } from '../shared/provider.service'; //1.Import the ProviderService
    import {NgForm} from '@angular/forms';
    
    @Component({
      selector: 'app-provider',
      templateUrl: './provider.component.html',
      styleUrls: ['./provider.component.css'],
    
    })
    
    export class ProviderComponent implements OnInit { 
      //3.Inject the ProviderService
      constructor(private providerService:ProviderService) { 
    
      }
    
      ngOnInit() {
      }

Answer 1

请加 '？' 在模板中，因为 selectedProvider 在某个时间点未定义。

providerService.selectedProvider?.ProviderName

Angular 尝试在更改检测的绑定验证期间解析此属性，但遇到此 null 异常。 ? 操作员是 null 安全操作员。