类型错误：无法在Object.View_FullEditTaxComponent_0._co读取未定义的属性“taxTypeId” [如updateDirectives]

Question

我有一个细节形成应该从列表表单中选择时加载一个记录的细节。当细节形成加载时，它应该显示所选记录的详细信息。在我的情况下，给出了详细的比较正常的，但它在控制台上显示标题错误，导致应用程序崩溃。

HTML（误差线）

<select id="taxTypeId" name="TaxTypeId" [(ngModel)]="tax.taxTypeId" class="form-control" > 
    <option *ngFor="let tt of taxTypes" value={{tt.id}}>{{tt.name}}</option> 
</select> 
<label for="taxTypeId" class="form-label">Tax Type</label> 

打字稿

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; 
    }); 
    } 

} 

如何解决这个吗？

Answer 1

由于您正在异步加载数据，因此tax属性最初为undefined。而当角度进行改变检测它正试图从[(ngModel)]="tax.taxTypeId"结合获得价值，因此，你得到的错误。

有许多办法来解决这个问题：

1）安全导航操作

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

2）*ngIf="tax"

与预定义的值初始化属性

tax: TaxDto = new TaxDto(); 

3）总结模板

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