Невозможно установить свойство 'ProjectId' из неопределенного

Question

Я пытаюсь редактировать детали проектов, связанных с WebAPI.Я могу успешно получить список проектов.Однако, когда я пытаюсь отредактировать список сотрудников, он продолжает показывать, что «Невозможно установить свойство» ProjectId «Не определено».

Я новичок в angular и просмотрел множество форумов, но безрезультатно.Я не понимаю, что именно я делаю неправильно.

Это мой project.services.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { project } from '/home/nineleaps/Desktop/rms/rms/src/app/project.model';
//import 'rxjs/add/operator/map';
//import 'rxjs/add/operator/catch';

import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ProjectService {

  projectList: Observable<project[]>;
  newproject : project;
  readonly ROOT_URL:any ="http://1fd9e27b.ngrok.io/api";

  constructor(private http: HttpClient) { }

  getProject()
  {
    return this.http.get<project[]>(this.ROOT_URL + '/Projects');
  }

  EditProject(emp: project) {  
    console.log(emp);  
   const params = new HttpParams().set('ProjectId', emp.ProjectId.toString());  
    const headers = new HttpHeaders().set('content-type', 'application/json');  
    var body = {  
      ProjectTitle: emp.ProjectTitle, ProjectDescription: emp.ProjectDescription, ProjectId: emp.ProjectId, StartDate: emp.StartDate
      , EndDate: emp.EndDate
    }  
    return this.http.put<project>(this.ROOT_URL + 'Projects/' + emp.ProjectId, body, { headers, params }) 
    .pipe(map((response: any) => response.json()));

}
} 

Модель класса project.model.ts

export class project
{
         ProjectId:number;
         ProjectTitle:string;
         ProjectDescription:string;
         StartDate:Date;
         EndDate:Date;
}

projectlist.component.html

<div class="container">  
  <input type="button" class="btn btn-info" (click)="loadAddnew()" data-toggle="modal" data-target="#myModal" value="Create New">  
  <hr>  
  <div *ngIf="!dataavailable">  

    <h4> No Project Data is present. PLease click Add new to add Data.</h4>  
  </div>  

  <table class="table table-striped table-dark table-bordered table-hover" *ngIf="dataavailable">
    <caption>Projects</caption>  
    <thead class="thead-light">  
      <tr>  
        <th scope="col">Start Date</th>  
        <th scope="col">Project ID</th>  
        <th scope="col">Project Description</th>  
        <th scope="col">Project Name</th>  
        <th scope="col">End Date</th>  
        <th scope="col" style="align-content: center">Action</th>  
      </tr>  
    </thead>  
    <tbody>  
      <tr *ngFor="let e of projectList let i = index ">  
        <td scope="col">{{e.StartDate}}</td>  
        <td scope="col">{{e.ProjectId}}</td>  
        <td scope="col">{{e.ProjectDescription}}</td>  
        <td scope="col">{{e.ProjectTitle}}</td>  
        <td scope="col">{{e.EndDate}}</td>  

        <td scope="col">  
          <button type="button" class="btn btn-default btn-primary" 
          (click)="loadnewForm(e.ProjectId,e.ProjectTitle,e.ProjectDescription,e.StartDate,e.EndDate)"
            data-toggle="modal" data-target="#myModaledit">  
            <span class="glyphicon glyphicon-edit"></span> Edit  
          </button>  
</td>
          <!-- |  
          <button type="button" class="btn btn-default btn-danger" (click)="deleteconfirmation(e.id)">  
            <span class="glyphicon glyphicon-trash"></span> Delete  
          </button>   -->


      </tr>  
    </tbody>  
  </table>  

<!--  COMMENT OUT THIS DIV BEFORE UNCOMMENTING BELOW CODE -->
<!--" -->
  <!-- <div id="myModal" class="modal fade" role="dialog">  
    <div class="modal-dialog">  
      <div class="modal-content">  
        <div class="modal-header">  
          <button type="button" class="close" data-dismiss="modal">×</button>  
          <h4 class="modal-primary">project Add</h4>  
        </div>  
        <div class="modal-body">  

          <app-project-add #empadd (nameEvent)="RefreshData($event)"></app-project-add>  

        </div>  
        <div class="modal-footer">  
          <button type="button" #closeBtn class="btn btn-danger" data-dismiss="modal">Close</button>  
        </div>  
      </div>  

    </div>  
  </div>  
-->

  <div id="myModaledit" class="modal fade" role="dialog">  
    <div class="modal-dialog">  
      <div class="modal-content">  
        <div class="modal-header">  
          <button type="button" class="close" data-dismiss="modal">×</button>  
          <h4 class="modal-title">Edit</h4>  
        </div>  
        <div class="modal-body">  
          <app-projectupdate (nameEvent)="RefreshData($event)" [isReset]="resetForm" #regForm></app-projectupdate>  
        </div>  
        <div class="modal-footer">  
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>  
        </div>  
      </div>  

    </div>  
  </div>

Загрузить новую функцию формы

@ViewChildren('regForm') editcomponent: ProjectUpdateComponent=null;
  loadnewForm(id: number, title: string, description: string, startdate: Date, enddate: Date) {  

    //console.log(typeof(this.editcomponent.objproject.ProjectId));
    try {

    this.editcomponent.objtempproject.ProjectId=id;
    this.editcomponent.objproject.ProjectId = id 
    this.editcomponent.objproject.ProjectTitle= title  
    this.editcomponent.objproject.ProjectDescription = description
    this.editcomponent.objproject.StartDate = startdate
    this.editcomponent.objproject.EndDate = enddate
  }  
  catch(e)
  {
    console.log(e)
  }

}
}

КОД ОШИБКИ

TypeError: Cannot set property 'ProjectId' of undefined
    at ProjectListComponent.push../src/app/project-list/project-list.component.ts.ProjectListComponent.loadnewForm (project-list.component.ts:62)
    at Object.eval [as handleEvent] (ProjectListComponent.html:31)
    at handleEvent (core.js:23106)
    at callWithDebugContext (core.js:24176)
    at Object.debugHandleEvent [as handleEvent] (core.js:23903)
    at dispatchEvent (core.js:20555)
    at core.js:21002
    at HTMLButtonElement.<anonymous> (platform-browser.js:993)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17289)

Answer 1

вам нужно создать объект класса project с переменной objtempproject в ProjectUpdateComponent, в данный момент вы просто указываете его тип.

просто измените строки кода ниже, это будет работать

ProjectUpdateComponent

  @Input() reset:boolean = false;

  @ViewChildren('regForm') myForm: NgForm;  

  @Input() isReset: boolean = false;  

  objtempproject: project = new project();  // change this line

и еще одна вещь, как сказал @Prashant Pimpale: не атакуйте null на @ViewChild

@ViewChildren('regForm') editcomponent: ProjectUpdateComponent;