Angular сервис не передает данные формы после маршрутизации - PullRequest
Новая
       79

Angular сервис не передает данные формы после маршрутизации

0 голосов
/ 06 августа 2020

Новичок в Angular, и я чувствую, что это просто очевидная ошибка, которую я упустил с точки зрения кода.

Я пытаюсь следовать руководству здесь: https://youtu.be/CUAHJxWGia0

У меня есть один компонент для создания / добавления идентификатора сотрудника под названием CreateEmployee . При отправке он должен направиться в компонент для вывода списка всех сотрудников ( ListEmployees ). Он использует employee.service.ts .

Когда я нажимаю кнопку «Отправить» (до или без маршрутизации), он правильно регистрирует ввод данных сотрудником в консоль CreateEmployee. Проблема в том, что при маршрутизации ко второму компоненту ListEmployees моя новая запись вообще не отображается, а отображаются только мои тестовые данные. Я убедился, что EmployeeService также включен в мой app.module.

create-employee.ts: 

import { Component, OnInit } from '@angular/core'
import { FormControl, FormBuilder, NgForm } from '@angular/forms'
import { EmployeeService } from 'app/services/employee.service'
import { Router } from '@angular/router'
import { Employee } from 'app/shared/employee.model'

@Component({
  selector: 'app-create-employee',
  template: ` <form class="" [formGroup]="employeeForm" (ngSubmit)="saveEmployee()">
      <div class="form-control">
        <app-input
          #memberID
          name="memberID"
          label="Member ID"
          formControlName="memberID"
          placeholder="Member ID"
        ></app-input>
      </div>
      <div><button type="submit" class="">Save</button></div>
    </form>

    {{ employeeForm.value | json }}
`,
  styleUrls: ['./create-employee.component.scss'],
})

export class CreateEmployeeComponent implements OnInit {
  employeeForm: any
  constructor(private fb: FormBuilder, private _employeeService: EmployeeService, private _router: Router) {}

  employee: Employee = {
    memberID: null,
  }

  ngOnInit(): void {
    this.employeeForm = this.fb.group({
      memberID: new FormControl(''),
    })

    this.employee = this.employeeForm.get('memberID').value
  }

  saveEmployee() {
    this._employeeService.save(this.employee)
    console.log(this.employeeForm.get('memberID').value)
    //   this._router.navigate(['employee-list'])
  }
}

list-employee. ts 

import { Component, OnInit } from '@angular/core'
import { Employee } from 'app/shared/employee.model'
import { EmployeeService } from 'app/services/employee.service'

@Component({
  selector: 'app-list-employees',
  template: `<div *ngFor="let employee of employees">
    <div class="">
      {{ employee.memberID }}
    </div>
  </div> `,
  styleUrls: ['./list-employees.component.scss'],
})
export class ListEmployeesComponent implements OnInit {
  employees: Employee[] = []
  constructor(private _employeeService: EmployeeService) {}

  ngOnInit(): void {
    this.employees = this._employeeService.getEmployees()
  }
}

employee.service.ts 

import { Injectable } from '@angular/core'
import { Employee } from 'app/shared/employee.model'

@Injectable({
  providedIn: 'root',
})
export class EmployeeService {
  listEmployees: Employee[] = [{ memberID: '1' }, { memberID: '2' }]
  constructor() {}

  getEmployees(): Employee[] {
    return this.listEmployees
  }

  save(employee: Employee) {
    this.listEmployees.push(employee)
  }
}
...