TypeError:无法读取Object.View_FullEditTaxComponent_0._co上未定义的属性"taxTypeId"(作为updateDirectives) [英] TypeError: Cannot read property 'taxTypeId' of undefined at Object.View_FullEditTaxComponent_0._co [as updateDirectives]

问题描述

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

I have a details form that should load the details of a record by when selected from the List Form. When the details form loads, it supposed to show the details of the selected record. In my case, it shows the details quite alright but it displays the titled error on the console, causing the application to crash.

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

}

请问该如何解决?

推荐答案

由于要异步加载数据，因此tax属性首先是undefined.当angular执行更改检测时，它试图从[(ngModel)]="tax.taxTypeId"绑定中获取值，因此会出现错误.

Since you're loading data asynchronously the tax property is undefined at first. And when angular performs change detection it is trying to get value from [(ngModel)]="tax.taxTypeId" binding and therefore you're getting the error.

有很多方法可以解决此问题:

There are many ways to solve the issue:

1)安全的导航操作员

1) Safe navigation operator

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

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

2) Initialize property with predefined value

tax: TaxDto = new TaxDto();

3)在*ngIf="tax"

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

这篇关于TypeError:无法读取Object.View_FullEditTaxComponent_0._co上未定义的属性"taxTypeId"(作为updateDirectives)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！