EditSensorComponent.html:10错误TypeError:无法读取未定义的属性“名称”

时间:2019-10-07 19:32:14

标签: javascript angular

我进入编辑路线时遇到问题。我收到此消息-

  

错误TypeError:无法读取未定义的属性“名称”

当我注释输入名称错误时,请为下一个输入返回。看我的代码。

import { Component, OnInit } from '@angular/core';
import { SensorService } from '../servicesapi/sensor.service';
import { ActivatedRoute, Router } from '@angular/router';
import { ISensor } from '../sensor/sensor'
@Component({
  selector: 'app-edit-sensor',
  templateUrl: './edit-sensor.component.html',
  styleUrls: ['./edit-sensor.component.scss']
})
export class EditSensorComponent implements OnInit {
  id: number;
  sens: ISensor;
   constructor(private route: ActivatedRoute, private router: Router, 
 private 
  sensor: SensorService) { }

ngOnInit() {
  // this.sens = new ISensor();

  this.id = this.route.snapshot.params['id'];

  this.sensor.getSingleSensor(this.id)
    .subscribe(data => {
      console.log("data" , data)
      this.sens = data;
    }, error => console.log(error));
  }


  updateEmployee() {
    this.sensor.updateSensor(this.id, this.sens)
      .subscribe(data => console.log(data), error => console.log(error));
    // this.employee = new Employee();
    // this.gotoList();
    this.router.navigate(['/']);
  }

  onSubmit() {
    this.updateEmployee();
 }
}

我的html也显示错误:

 <h3>Update Employee</h3>
 <div [hidden]="submitted" style="width: 400px;">
  <form (ngSubmit)="onSubmit()">
    <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" required 
  [(ngModel)]="sens.name" name="name"> //here is problem
    </div>

   <div class="form-group">
    <label for="path">Path</label>
    <input type="text" class="form-control" id="path" required 
 [(ngModel)]="sens.path" name="path">
    </div>

  <button type="submit" class="btn btn-success">Submit</button>
</form>
 </div>

我可以读取数据。我什至可以吓一跳,但是这个错误使我返回。

1 个答案:

答案 0 :(得分:0)

出现此错误的原因是因为 EditSensorComponent的 HTML文件是由ngOnInit()之前的DOM呈现的。现在,由于您仅定义了 sens 而不是对其进行了初始化,因此您会收到未定义的错误

尝试一下:
1.在定义它时,在 EditSensorComponent 中初始化sens对象。
2.查看代码,假设 sens 对象具有两个属性(名称和路径)

sens: ISensor = {
    name: '',
    path: ''
}