Угловая 5 кнопка не ведет себя должным образом

Question

Я сделал этот урок, который нашел на YouTube здесь , и я не могу получить кнопку Изменить, чтобы заполнить поля слева. Вот соответствующие фрагменты кода:

работник-list.component.html

    <h6 class="text-center">Employee Register</h6><br>
    <table class="table table-sm table-hover">
    <tr *ngFor="let employee of employeeList">
        <td>{{employee.name}}</td>
        <td>{{employee.position}}</td>
        <td>
            <a class="btn" (click)="onEdit(employee)">
                <i class="fa fa-pencil-square-o"></i>
            </a>
            <a class="btn" (click)="onDelete(employee.$key)">
                <i class="fa fa-trash-o"></i>
            </a>
        </td>
    </tr>
</table>

работник-list.component.ts

    onEdit(emp : Employee){
        this.employeeService.selectedEmployee = Object.assign({}, emp);
  }

employee.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Employee } from './employee.model';

@Injectable()
export class EmployeeService {

    employeeList : AngularFireList<any>;
    selectedEmployee : Employee = new Employee();

  constructor(private firebase : AngularFireDatabase) { }
    getData(){
        this.employeeList = this.firebase.list('employees');
        return this.employeeList;
    }

    insertEmployee(employee : Employee){
        this.employeeList.push({
            name: employee.name,
            position: employee.position,
            office: employee.office,
            salary: employee.salary
        });
    }

    updateEmployee(employee : Employee){
        this.employeeList.update(employee.$key, 
            {
            name: employee.name,
            position: employee.position,
            office: employee.office,
            salary: employee.salary
        });
    }

    deleteEmployee($key : string){
        this.employeeList.remove($key);
    }
}

Я попытался отладить, и кажется, что вызывается метод onEdit (), но он не заполняет поля. Любая помощь здесь будет оценена.

employee.component.html

    <form #employeeForm="ngForm" (ngSubmit)="onSubmit(employeeForm)">
    <input type="hidden" name="$key" #$key="ngModel" [(ngModel)]="employeeService.selectedEmployee.$key">
    <div class="form-group">
        <label>Name</label>
        <input class="form-control" name="name" #name="ngModel" [(ngModel)]="employeeService.name" placeholder="Full Name" required>
    </div>
    <div class="form-group">
        <label>Position</label>
        <input class="form-control" name="position" #name="ngModel" [(ngModel)]="employeeService.position" placeholder="Position">
    </div>
    <div class="form-group">
        <label>Office</label>
        <input class="form-control" name="office" #name="ngModel" [(ngModel)]="employeeService.office" placeholder="Office">
    </div>
    <div class="form-group">
        <label>Salary</label>
        <div class="input-group">
            <div class="input-group-addon">
                <i class="fa fa-dollar"></i>
            </div>
        <input class="form-control" name="salary" #name="ngModel" [(ngModel)]="employeeService.salary" placeholder="Salary">
    </div>
    </div>
    <div class="form-group">
        <button class="btn btn-default" type="submit" [disabled]="!employeeForm.valid">
            <i class="fa fa-floppy-o"></i>
            Submit</button>
        <button class="btn btn-default" type="button" (click)="resetForm(employeeForm)">
            <i class="fa fa-repeat"></i>
            Reset</button>
    </div>
</form>

employee.component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { EmployeeService } from '../shared/employee.service';
import { ToastrService } from 'ngx-toastr';

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

  constructor(private employeeService : EmployeeService, private tostr : ToastrService) { }

  ngOnInit() {
    this.resetForm();
  }

  onSubmit(employeeForm : NgForm){
    if(employeeForm.value.$key == null)
        this.employeeService.insertEmployee(employeeForm.value);
    else
                this.employeeService.updateEmployee(employeeForm.value);

    this.resetForm(employeeForm);
    this.tostr.success('Submitted Successfully', 'Employee Register');
  }

  resetForm(employeeForm? : NgForm){
    if(employeeForm != null)
        employeeForm.reset();
    this.employeeService.selectedEmployee = {
        $key : null,
        name : '',
        position : '',
        office : '',
        salary : 0
    }
  }
}

Answer 1

Я думаю, что ваш employee.component.html файл содержит проблему. Вы заполняете модель формы такими строками, как [(ngModel)]="employeeService.name". Ваша служба employeeService не имеет свойства или метода name, поэтому employeeService.name вернет undefined. Я предполагаю, что вы хотите позвонить employeeService.selectedEmployee.name, потому что вы хотите заполнить форму с выбранным сотрудником name.

Так что ответ может выглядеть примерно так:

<div class="form-group">
  <label>Name</label>
  <input class="form-control" name="name" #name="ngModel" [(ngModel)]="employeeService.selectedEmployee.name" placeholder="Full Name" required>
</div>
<div class="form-group">
  <label>Position</label>
  <input class="form-control" name="position" #name="ngModel" [(ngModel)]="employeeService.selectedEmployee.position" placeholder="Position">
</div>
<div class="form-group">
  <label>Office</label>
  <input class="form-control" name="office" #name="ngModel" [(ngModel)]="employeeService.selectedEmployee.office" placeholder="Office">
</div>
<div class="form-group">
  <label>Salary</label>
  <div class="input-group">
    <div class="input-group-addon">
      <i class="fa fa-dollar"></i>
    </div>
    <input class="form-control" name="salary" #name="ngModel" [(ngModel)]="employeeService.selectedEmployee.salary" placeholder="Salary">
  </div>
</div>

Обновление

Я заметил, что у вас employeeService установлено как private в employee.component.ts (т.е. constructor(private employeeService, ...). Я думаю, что это должно генерировать ошибку, если / когда вы пытаетесь получить доступ к employeeService непосредственно в шаблоне компонента (employee.component.html). Для начала я бы просто переключил это ключевое слово private на public и убедился, что все работает. Если вы знаете разницу между private и public, вы можете очистить ее, если проблема будет решена. Если вы не знаете разницу между ними, просто оставьте это как public (что небрежно, но не важно).

Answer 2

Обновите службу EmployeeService, как показано ниже. Добавьте несколько методов получения и установки.

@Injectable()
export class EmployeeService {

    employeeList : AngularFireList<any>;
    _selectedEmployee : Employee = new Employee();

    constructor(private firebase : AngularFireDatabase) { }

    //Adding getter and setter below

    get selectedEmployee():Employee{
        return this._selectedEmployee ;
    }

    set selectedEmployee(emp:Employee) {
        this._selectedEmployee = emp;
    }

......
    ......
.....
}

Полагаю, ваш onEdit не может установить или обновить выбранного сотрудника. Таким образом, использование метода получения / установки выше должно быть правильным.