由抛出错误驱动的模板。
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() { }
}
provider.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() {
}
答案 0 :(得分:0)
请在模板中添加“?”,因为 selectedProvider 在某个时间点未定义。
providerService.selectedProvider?.ProviderName
Angular 尝试在更改检测中的绑定验证期间解析此属性,但它遇到了此 null 异常。 ?运算符是空安全运算符。