Question

我正在学习Angular2 +并正在完成我的任务。我花了大约3个小时试图调试这个bug。我的ngFor语句有问题，尤其是[value]部分。我的代码出了点问题。

错误是：

EmployeeComponent.html:27 ERROR TypeError：无法读取属性 'PositionName'未定义在Object.eval [as updateDirectives]（EmployeeComponent.html：27） at Object.debugUpdateDirectives [as updateDirectives]（core.js：14689）在checkAndUpdateView（core.js：13836）在callViewAction（core.js：14187） at execEmbeddedViewsAction（core.js：14145）在checkAndUpdateView（core.js：13837）在callViewAction（core.js：14187） at execEmbeddedViewsAction（core.js：14145）在checkAndUpdateView（core.js：13837）在callViewAction（core.js：14187）

所以，这是我的组件html文件，其中包含问题点。

<div class="panel-body" *ngIf="employee">
        <form (ngSubmit)="onSubmit()">
        ......
                    <div class="col-md-6">
                      <div class="form-group"   >
                        <label for="PositionName">Position:</label>
                        <select *ngIf="positions" class="form-control" id="PositionName" name="PositionName" [(ngModel)]="employee.Position.PositionName" >
                          <option *ngFor="let u of positions" [value]="u.PositionName" >{{u.PositionName}}</option>
                        </select>
                      </div>
                    </div>

        .....

        <input type="submit" class="btn btn-primary pull-right" value="Update Employee" />
        </form>
        </div>

我不知道为什么不让我更新我的API。如果我删除此位置字段，一切正常，例如我可以更新名字，姓氏等。

我尝试了什么

1）*在多个位置发布 ngIf

2）使用elvis运算符

3）多次重写代码

我被严重困住了，请帮忙！

这是我正在使用的一些文件。

employee.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs/Observable";
import { Employee } from "./data/employee";
import { EmployeeRaw } from "./data/employeeRaw";
@Injectable()
export class EmployeeService {

  private url = "https://eanton-teams-api-web422.herokuapp.com";

  constructor(private http:HttpClient) { }

  getEmployees() : Observable<Employee[]> {
    return this.http.get<Employee[]>(`${this.url}/employees`);
  }

  getEmployee(id) : Observable<EmployeeRaw[]> {
    return this.http.get<EmployeeRaw[]>(`${this.url}/employee/` + id);
  }

  saveEmployee(EmployeeRaw) : Observable<any>{
    return this.http.put<any>(this.url + '/employee/' + EmployeeRaw._id, EmployeeRaw);
  }

}

employee.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { EmployeeRaw } from './data/employeeRaw' ;
import { Position } from './data/position' ;

import { EmployeeService } from './employee.service' ;
import { PositionService } from './position.service' ;
import { LogService } from './log.service' ;

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {

  employee: EmployeeRaw;
  positions: Position[];

  constructor( private route: ActivatedRoute,
    private e : EmployeeService,
    private p : PositionService) { }

  ngOnInit() {

    const id = this.route.snapshot.paramMap.get('id');


    this.e.getEmployee(id).subscribe( employee => {
      this.employee = employee[0];
      console.log(this.employee);
      //this.hireDate = employee[0].HireDate.format('LL');
    });
    //{{employee.HireDate | amDateFormat:'LL'}}

    this.p.getPositions().subscribe( positions => {
      this.positions = positions;
      console.log(this.positions);
    });

    //DEBUG

    console.log(this.route);
    console.log(id);

    //console.log(now);

    //console.log( this.route.params.id.toString());
  } //ngOnInit

  onSubmit(){
    this.e.saveEmployee(this.employee)
    .subscribe( employee => this.employee = employee );
    console.log(this.employee);

  }

}

数据/ employeeRaw.ts

export class EmployeeRaw {
            _id: string;
      FirstName: string;
       LastName: string;
  AddressStreet: string;
   AddressState: string;
    AddressCity: string;
     AddressZip: string;
       PhoneNum: string;
      Extension: number;
       Position: string;
       HireDate: string;
    SalaryBonus: number;
            __v: number;
}

数据/ position.ts

export class Position {
                  _id: string;
         PositionName: string;
  PositionDescription: string;
   PositionBaseSalary: number;
                  __v: number;
}

ngFor FormsModule无法读取属性Angular2 +

0 个答案: