Не удается прочитать свойство 'id' из неопределенного в ngOnInit () Angular7 - PullRequest
Новая
       19

Не удается прочитать свойство 'id' из неопределенного в ngOnInit () Angular7

0 голосов
/ 10 апреля 2019

Я новичок в угловой.Проблема на самом деле в EmployeeComponent.ts, если я вызываю this.resetForm(); в ngOnInit(), тогда элементы управления диалоговым окном отображаются при загрузке страницы ... но во время редактирования, когда он приходит из списка сотрудников, service.formData возвращается к нулю все время, пока яне хочу, чтобы это случилосьЯ хочу, чтобы обе функции выполнялись.

Это ошибка ниже, если я remove this.resetForm(); в ngOnInit().(но редактирование работает нормально) Примечание: service.formData содержит поля id, description и active

Ошибка консольного журнала: EmployeeComponent_Host.ngfactory.js?[sm]: 1 ОШИБКА TypeError: Невозможно прочитать свойство 'id' из undefined в EmployeeComponent.push.

EmployeeComponent.ts 

ngOnInit() {
  this.resetForm();
}


resetForm(form ? : NgForm) {

  if (form != null)
    form.resetForm();

  this.service.formData = {
    id: null,
    description: '',
    active: true,
  }
  console.log(this.service.formData.id);
}

EmployeeListComponent.ts 

onEdit(emp: Employee) {
  this.service.formData = Object.assign({}, emp);
  const dialogConfig = new MatDialogConfig();
  dialogConfig.disableClose = true;
  dialogConfig.autoFocus = true;
  dialogConfig.width = "50%";
  this.dialog.open(EmployeeComponent, dialogConfig);
}

Employee.component.html 

<form #form="ngForm" autocomplete="off" >
  <mat-grid-list cols="2">
          <input type="hidden" name="id" #id="ngModel" [(ngModel)]="service.formData.id">       
        <mat-form-field>   
          <input name="description" matInput #description="ngModel" [(ngModel)]="service.formData.description" placeholder="Employee" required>  
   </mat-form-field>
 <mat-checkbox  matInput #active="ngModel" [(ngModel)]="service.formData.active" name="active">Active</mat-checkbox>         
  </mat-grid-list>
      <button mat-raised-button color="primary" type="submit" [disabled]="form.invalid" (click)="onSubmit(form)">Submit</button>
      <button mat-raised-button color="warn" style="margin-left: 6px;" (click)="onClear(form)">Clear</button>

</form>

1 Ответ

0 голосов
/ 10 апреля 2019

Здесь EmployeeComponent - это ваш диалоговый компонент, который нужно открыть, поэтому вам нужно предоставить данные для диалога, используя ниже в конструкторе EmployeeComponent 

 constructor(
@Inject(MAT_DIALOG_DATA) data)){}

, и когда вы открываете диалог для редактирования, вам нужноустановить данные 

  onEdit(emp: Employee) {
      dialogConfig = new MatDialogConfig();
      dialogConfig.disableClose = true;
      dialogConfig.autoFocus = true;
      dialogConfig.width = "50%";
      // Provide your data here      
      dialogConfig.data = emp;

      this.dialog.open(EmployeeComponent, dialogConfig);
    }

Теперь вы можете использовать эти данные в EmployeeComponent под именем «data» свойство

и использовать только форму сброса в ngOninit 

ngOnInit() {
if (form != null)
    form.resetForm();
}

Другие вещи, которые вынужно обработать, как очистить эти данные, когда вы сделали с save

...