ngOnChanges не уволен - PullRequest
Новая
       33

ngOnChanges не уволен

0 голосов
/ 29 января 2019

Я тестирую метод ngOnChanges в моем работающем коде.Но кажется, что ngOnchanges не вызывается, хотя он компилируется.Ниже мой код.

create-employee.component.html: 

<form #employeeForm="ngForm"  (ngSubmit)=saveEmployee(employeeForm)>
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title"> Create Employee</h3>
    </div>
    <div class="panel-body">
      <div class="form-group" [class.has-error]="fullName.invalid && fullName.touched" [class.has-success]="fullName.valid">
        <label for="fullName"class="control-label">Full Name</label>
        <input required type ="text"  class= "form-control" 
          name="fullName1" 
          [(ngModel)]="employee.fullName"
          #fullName="ngModel" id="fullName">
        <span class="help-block" *ngIf="fullName.invalid && fullName.touched">
          Full Name is Required
        </span>
      </div>
    </div>
    <div class="panel-footer">
     <button  [disabled]="employeeForm.invalid" type ="submit" class= "btn btn-primary" > Save </button>
    </div>
  </div>
  {{employeeForm.value|json}}
  employee: {{employee| json}}
  employee.isActive: {{employee.isActive}}
</form>

create-employee.component.ts: 

import { Component,OnChanges, OnInit ,SimpleChanges,Input} from '@angular/core';
import { NgForm } from '@angular/Forms';
import { Department } from '../models/department.model';
import { BsDatepickerModule,BsDatepickerConfig} from 'ngx-bootstrap/datepicker';
import { Employee } from '../models/employee.model';

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

  constructor() {}

  saveEmployee( employeeForm:NgForm): void {
    console.log(employeeForm);
    console.log("employee = " + JSON.stringify(this.employee));  
  }


  allMsgChangeLogs: string[] = [];
  allEmployeeChangeLogs: string[] = [];

  @Input() employee:Employee = { 
    id: null,
    fullName: 'Jay',
  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log("inside on changes"); 
    for (let propName in changes) {  

      let change = changes[propName];

      let curVal  = JSON.stringify(change.currentValue);
      let prevVal = JSON.stringify(change.previousValue);
      let changeLog = `${propName}: currentValue = ${curVal}, previousValue = ${prevVal}`;

      if (propName === 'employee') {
          this.allEmployeeChangeLogs.push(changeLog);
          console.log(changeLog);
      } else {
         console.log("change detecetd");
      }
    }
  }

Используемый в форме объект объекта модели:as: employee.model.ts: 

export class Employee {
    id: number;
    fullName: string;
}

Метод ngOnChanges не запускается вообще.Любые входы?

1 Ответ

0 голосов
/ 29 января 2019

@Input - для родительско-дочерних взаимодействий между angular components.Я не вижу из вашего кода, где вы передаете employee на CreateEmployeeComponent.Так что employee всегда undefined, а ngOnChanges не срабатывает.Больше здесь https://angular.io/guide/component-interaction.

...