Question

我在YouTube here上找到了这个教程，我无法通过编辑按钮填充左侧的字段。以下是相关的代码片段：

雇员-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，如下所示。添加一些getter和setter方法。

@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无法设置或更新您选择的员工。所以使用上面的getter / setter应该是正确的方法。

Angular 5按钮表现不正常

2 个答案:

更新