Firebase数据库自动生成隐式节点子对象迭代

时间:2019-04-18 03:29:51

标签: angular

我无法挖掘嵌套在firebase表中自动生成的加密节点中的Employee对象。 下面是FB表和相关代码的屏幕截图。

FB Database

EmployeeService代码:

export class EmployeeService {

  private employeeURL = "https://student-28bbd.firebaseio.com/employees.json";

  constructor(private http: HttpClient) {}

  getEmployees(): Observable < Employee[] > {
    return this.http.get < Employee[] > (this.employeeURL, httpHeader)
  }

  saveEmployee(employee: Employee): Observable < Employee > {
    return this.http.post < Employee > (this.employeeURL, employee, httpHeader)
  }
}

组件代码:

export class EmployeeListComponent implements OnInit {

  employees: Employee[] = [];

  constructor(private employeeService: EmployeeService) {}

  ngOnInit() {
    this.getEmployees();
  }

  getEmployees() {
    this.employeeService.getEmployees()
      .subscribe(
        employee => this.employees = employee
      )
  }

  saveEmployee(id: number, name: string, age: number, designation: string, salary: number, phone: number, email: string) {
    this.employeeService.saveEmployee({
          id,
          name,
          age,
          designation,
          salary,
          phone,
          email
        }
        as Employee)
      .subscribe(
        items => this.employees.push(items)
      )
  }
}

HTML模板:

<div>
  <div style="text-align:right;">
    <label for="">ID: <input type="text" #empID></label><br>
    <label for="">Name: <input type="text" #empName></label><br>
    <label for="">Age: <input type="text" #empAge></label><br>
    <label for="">Designation: <input type="text" #empDesig></label><br>
    <label for="">Salary: <input type="text" #empSal></label><br>
    <label for="">Phone: <input type="text" #empPh></label><br>
    <label for="">Email: <input type="text" #empEmail></label><br>
    <button (click)="saveEmployee(empID.value, empName.value, empAge.value, empDesig.value, empSal.value, empPh.value, empEmail.value)"> Add Employee</button>
  </div>
</div>
<hr>
<div>
  <ul>
    <li *ngFor="let employee of employees">
      {‌{ employee.name }} <span (click)="deleteEmployee(employee)">X</span>
    </li>
  </ul>
</div>

非常感谢您的帮助。

0 个答案:

没有答案