Angular TypeError:无法读取属性'；taxTypeId'；对象处未定义的。查看\u FullEditTaxComponent\u 0.\u co[作为更新的指令]

我有一个详细信息表单，当从列表表单中选择时，该表单应按加载记录的详细信息。加载详细信息表单时，它应该显示所选记录的详细信息。在我的例子中，它很好地显示了细节，但它在控制台上显示了标题错误，导致应用程序崩溃

HTML（错误行）

{{tt.name}
税种

Typescript

import { Component, ViewChild, Injector, Output, EventEmitter, ElementRef, OnInit } from '@angular/core';
import { RouterLink, Router, ActivatedRoute } from '@angular/router';
import { TaxServiceProxy, TaxDto, ListResultDtoOfTaxTypeDto } from '../../../shared/service-proxies/tax-service-proxies';
import { TaxTypeDto } from '../../../shared/service-proxies/taxType-service-proxies';
import { AppComponentBase } from '@shared/app-component-base';

@Component({
  selector: 'app-full-edit-tax',
  templateUrl: './full-edit-tax.component.html',
  styleUrls: ['./full-edit-tax.component.css']
})
export class FullEditTaxComponent extends AppComponentBase implements OnInit {
  active: boolean = false;
  saving: boolean = false;
  tax: TaxDto;
  taxTypes: TaxTypeDto[] = [];

  @Output() fromSave: EventEmitter<any> = new EventEmitter<any>();

  constructor(
    _router: Router,
    injector: Injector,
    private _taxService: TaxServiceProxy,
    private route: ActivatedRoute
  ) {
      super(injector);
      this.router = _router;
   }

  ngOnInit() {
    this.loadData();
    this.getTaxTypes();
  }

  loadData(): void {
    let id = this.route.snapshot.params['id'];
    this._taxService.get(id)
    .subscribe((result: TaxDto) => {
      this.tax = result;
    })
  }

  getTaxTypes(): void {
    this._taxService.getTaxTypes()
    .subscribe((result: ListResultDtoOfTaxTypeDto) => {
        this.taxTypes = result.items;
    });
  }

}

从'@angular/core'导入{Component，ViewChild，Injector，Output，EventEmitter，ElementRef，OnInit}；
从'@angular/Router'导入{RouterLink，Router，ActivatedRoute}；
从“../../../shared/service proxies/TaxService proxies”导入{TaxServiceProxy，TaxDto，ListResultTooFTExtypeDTO}”；
从“../../../shared/service proxies/taxType service proxies”导入{TaxTypeDto}”；
从'@shared/app component base'导入{appcomponent base}；
@组成部分({
选择器：“应用程序完全编辑税”，
templateUrl:'./完整编辑tax.component.html'，
样式URL:['./完整编辑tax.component.css']
})
导出类FullEditTaxComponent扩展AppComponentBase实现OnInit{
活动：布尔=假；
保存：布尔值=false；
税项:TaxDto ;；
分类类型：TaxTypeDto[]=[]；
@save:EventEmitter=neweventemitter（）的输出（）；
建造师(
_路由器:路由器,，
喷油器：喷油器，
private\u taxService:TaxServiceProxy，
专用路由：ActivatedRoute
) {
超级注射器；
this.router=\u路由器；
}
恩戈尼尼特（）{
这是loadData（）；
这是getTaxTypes（）；
}
loadData（）：void{
设id=this.route.snapshot.params['id']；
此.\u taxService.get（id）
.订阅（（结果：TaxDto）=>{
这个。税=结果；
})
}
getTaxTypes（）：void{
此.\u taxService.getTaxTypes（）
.subscribe（（结果：ListResultToOftExtypedTo）=>{
this.taxTypes=result.items；
});
}
}

---

如何解决此问题？

由于您正在异步加载数据，

tax

属性最初是

未定义的。当angular执行更改检测时，它试图从
[（ngModel）]=“tax.taxTypeId”
绑定中获取值，因此您得到了错误

解决这个问题的方法有很多：

1） 安全导航操作员

[ngModel]="tax?.taxTypeId" (ngModelChange)="tax.taxTypeId && tax.taxTypeId = $event"

2） 使用预定义值初始化属性

tax: TaxDto = new TaxDto();

3） 将模板包装在
*ngIf=“tax”


{{tt.name}
所选选项的值应等于
tax.taxTypeId
，但
tax
未初始化，因此未定义，因此无法读取
tax.taxTypeId
的值。初始化
此税
。
tax: TaxDto = new TaxDto();

<select *ngIf="tax" id="taxTypeId" name="TaxTypeId" [(ngModel)]="tax.taxTypeId" ...>
   <option *ngFor="let tt of taxTypes" value={{tt.id}}>{{tt.name}}</option>
</select>