Angular 4 无法读取未定义的属性 'product_name'

Question

我想编辑产品并在更新产品之前显示详细信息。我已经开发了一个表单以及相关的组件和服务，但是，我在 angular 4 应用程序中收到一条错误消息 ERROR TypeError: Cannot read property 'product_name' of undefined。我在 "update-product.component.html:

中写了以下内容

<div class="container">
  <form [formGroup]="productUpdateForm" (ngSubmit)="updateproduct()" class="form-signin" novalidate
        [class.was-validated]="productUpdateForm.invalid && (productUpdateForm.dirty || productUpdateForm.touched)">
    <h2 class="form-signin-heading text-center">Update Product</h2>

   <div class="alert alert-danger" *ngIf="dataInvalid">
      <p *ngFor="let error of formErrors">{{ error }}</p>
    </div>
    <div class="form-group">
      <label class="sr-only">Product Name</label>
      <input type="text" formControlName="product_name" class="form-control" [class.is-invalid]="dataInvalid"
             placeholder="Enter Name" required [(ngModel)] = "data.product_name">
      <div class="invalid-feedback">
        Name is required.
      </div>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit" [disabled]="productUpdateForm.invalid" *ngIf="!formSubmitting">Update</button>
    <button class="btn btn-lg btn-primary btn-block" type="button" [disabled]="formSubmitting" *ngIf="formSubmitting">Updating...</button>
  </form>
</div>

而我的更新-product.component.ts如下：

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {Router, RouterModule, ActivatedRoute} from '@angular/router';
import {HttpErrorResponse} from '@angular/common/http';
import { HttpClient , HttpHeaders }  from '@angular/common/http';
import { UpdateProductService } from './update-product.service';


@Component({
  selector: 'app-update-product',
  templateUrl: './update-product.component.html',
  styleUrls: ['./update-product.component.scss']
})
export class UpdateProductComponent implements OnInit {

  productUpdateForm: FormGroup;
  dataInvalid = false;
  formErrors = [];
  formSubmitting = false;
  id:number;

  constructor(private UpdateProductService: UpdateProductService, private route: ActivatedRoute, private fb: FormBuilder) { 
  this.createForm();
  }

    createForm(){
    this.productUpdateForm = this.fb.group({
      product_name: ['', Validators.required],
      description: ['', [Validators.required, Validators.maxLength(300)]]
    });
  }
   ngOnInit() {
   this.route.params.subscribe(params => {
      this.id = params['id'];
    });
    this.UpdateProductService.getProduct(this.id)
      .subscribe(data => {
        console.log(data);
        this.data = data;
      } 
  }
}

请注意，数据在输入框中正确显示，但在控制台，我收到上述错误。

Answer 1

您还没有在您的组件中声明 data。

    this.UpdateProductService.getProduct(this.id)
      .subscribe(data => {
        console.log(data);
        this.data = data;  // there is no variable data in your component
      } 
  }

使用前需要声明

export class UpdateProductComponent implements OnInit {

  data:any="";

由于您没有声明它并在您的 html 中使用 data 的 product_name 属性，它会抛出此错误。

Answer 2

您需要对插值中的变量进行安全检查。

data?.product_name

在你的例子中

      <input type="text" formControlName="product_name" class="form-control" [class.is-invalid]="dataInvalid"
             placeholder="Enter Name" required [(ngModel)] = "data?.product_name">

以上ngModel数据改为data?。这将检查它是否存在。

Angular 4 无法读取未定义的属性 'product_name'

Angular 4 Cannot read property 'product_name' of undefined

angular

angular4-forms

Angular 4 无法读取未定义的 属性 'product_name'

Angular 4 Cannot read property 'product_name' of undefined

angular

angular4-forms

Angular 4 无法读取未定义的属性 'product_name'