“可觀察”類型上不存在屬性“推送”<any[]></any[]>

Question

這是我的第一個 angular 項目，請幫助我改進，請我想做一個 angular 項目，我可以從 FireBase CRUD 數據，當我不想知道如何解決這個錯誤時看到一些解決方案，但它對我不起作用我使用 Angular CLI 版本 11

這是服務：

 import { Employee } from './../components/Employee';
 import { Injectable } from '@angular/core';
 import {AngularFireDatabase} from '@angular/fire/database'
 import{AngularFirestore} from '@angular/fire/firestore';
 import {Observable} from 'rxjs';

 @Injectable({
 providedIn: 'root'
 })
 export class EmployeeService {
 employees:Observable<any[]>;
 Employee:Observable<any>|undefined;
 constructor(public af:AngularFireDatabase) { 
 this.employees=af.list('/employees/employees').valueChanges();
  }
 getEmployees(){
 return this.employees;
 }
 addEmployee(employee:Employee){
 this.employees=this.employees.push(employee);

 }
 }

這是 AddEmployeeComponent：

 import { EmployeeService } from './../../serivices/employee.service';

 import { Component, OnInit } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import {Employee}from '../Employee'
 import {FlashMessagesService} from 'angular2-flash-messages'; 
 import {Router} from '@angular/router'; 
 
 @Component({
 selector: 'app-add-employee',
 templateUrl: './add-employee.component.html',
 styleUrls: ['./add-employee.component.css']
 })
 export class AddEmployeeComponent implements OnInit {
 employee:Employee={
 firstName:"",           
 lastName:"",  
 email:"",
 country:"",
 city:"",
 phone:0,
 salary:0
  }
 disablesalary:boolean=true; 
 constructor( public flashmessagesservices:FlashMessagesService,public router:Router,public 
 employeeservice:EmployeeService) { }

 ngOnInit(): void {
 }
 mysubmit(fo:NgForm){
 if (!fo.valid) {
 console.log("is not valid",fo.valid);
 this.flashmessagesservices.show('please write your correct info',
 {cssClass:'alert-danger',timeout:3000});
 this.router.navigate(['add-employee']);
 }else{
 this.employeeservice.addEmployee(fo.value);
 //console.log("is valid",fo.valid);
 // console.log(this.employee);
 };

 }
 }

這是員工界面

 export interface Employee{
 $key?:string;             
 firstName?:string;            
 lastName?:string;  
 email?:string;
 country?:string;
 city?:string;
 phone?:number;
 salary?:number;                          
 }  
 

這是我的 html 代碼：

   <style >
      .container{
         margin-top: 3px;
       }
      .container #back{
       margin-left:60%;
        }
       </style>
       <div class="container">
             <div class="row">
                <div class="col-sm-6">
                   <h3>Add Employee <i class="fa fa-plus-square" aria-hidden="true"></i></h3>
                   <form novalidate #fo="ngForm" (ngSubmit)="mysubmit(fo)">
                      <!--first name -->
                      <div class="mb-3">
                          <label for="firstname" class="form-label">Firstname</label>
                           <input type="text" class="form-control" id="firstname" 
                            [(ngModel)]="employee.firstName"  
                            #employeefirstname="ngModel" required minlength="4" name="firstname"> 
              
                            <div *ngIf="employeefirstname.errors?.required && 
                              employeefirstname.touched " #val class="alert alert-danger">
                              First name is required
                            </div>
                            <div *ngIf="employeefirstname.errors?.minlength && 
                                employeefirstname.touched" class="alert alert-danger"> the length is 
                                 too low</div>
                            </div>
            
                           <!--last name -->
                             <div class="mb-3">
                 <label for="lastname" class="form-label">Last Name</label>
                <input type="text" class="form-control" id="lastname" [(ngModel)]="employee.lastName"  
                #employeelastname="ngModel" required minlength="4" name=lastname> 
                <div *ngIf="employeelastname.errors?.required && employeelastname.touched" 
                 class="alert alert-danger" [ngStyle]="{'border-right:':'2px solid red'}">
                   name is required
                </div>
                <div *ngIf="employeelastname.errors?.minlength && employeelastname.touched" 
               class="alert alert-danger">the length is too low</div>
              </div>

              <!--email name -->
            <div class="mb-3">
                <label for="email" class="form-label">email</label>
                <input type="email" class="form-control" id="email" [(ngModel)]="employee.email"  
                #employeeemail="ngModel" required minlength="4" name="email"> 
                <div *ngIf="employeeemail.errors?.required && employeeemail.touched" class="alert 
                alert-danger">
                  email is required
                </div>
              </div>
              

              <!--country  -->
            <div class="mb-3">
                <label for="country" class="form-label">country</label>
                <input type="text" class="form-control" id="country" [(ngModel)]="employee.country"  
                #employeecountry="ngModel" required minlength="4" name="country"> 
                <div *ngIf="employeecountry.errors?.required && employeecountry.touched" class="alert 
                  alert-danger">
                  country  is required
                </div>
              </div>

                <!--city  -->
            <div class="mb-3">
                <label for="city" class="form-label">city</label>
                <input type="text" class="form-control" id="city" [(ngModel)]="employee.city"  
                #employeecity="ngModel" required minlength="4" name="city"> 
                <div *ngIf="employeecity.errors?.required && employeecity.touched" class="alert 
                 alert-danger">
                  city is required
                </div>
              </div>


                 <!--phone  -->
            <div class="mb-3">
                <label for="phone" class="form-label">phone</label>
                <input type="number" class="form-control" id="city" [(ngModel)]="employee.phone"  
                #employeephone="ngModel" required minlength="4" name="phone"> 
                <div *ngIf="employeephone.errors?.required && employeephone.touched" class="alert 
                   alert-danger">
                  phone is required
                </div>
              </div>

                  <!--salary  -->
            <div class="mb-3">
                <label for="salary" class="form-label">salary</label>
                <input type="number" class="form-control" id="city" [(ngModel)]="employee.salary"  
                #employeesalary="ngModel" required minlength="4" name="salary" 
                 [disabled]="disablesalary"><!--use it to disable any thing in html--> 
                <div *ngIf="employeesalary.errors?.required && employeesalary.touched" class="alert 
                 alert-danger">
                  salary is required
                </div>
              </div> 

                  <button type="submit" class="btn btn-success">Submit</button>
             </form> 
               </div>
            <div class="col-sm-6">
                 <a href="#" routerLink="/">
                       <button class="btn btn-warning" id="back"> <i class="fa fa-arrow-left" aria- 
                        hidden="true"></i> Back to dashbord </button>
                 </a>
                  </div>   
                   </div>
                       </div>

Answer 1

這是我的第一個 angular 項目，請幫助我改進，請我想做一個 angular 項目，我可以從 FireBase CRUD 數據，當我不想知道如何解決這個錯誤時看到一些解決方案，但它對我不起作用我使用 Angular CLI 版本 11

這是服務：

 import { Employee } from './../components/Employee';
 import { Injectable } from '@angular/core';
 import {AngularFireDatabase} from '@angular/fire/database'
 import{AngularFirestore} from '@angular/fire/firestore';
 import {Observable} from 'rxjs';

 @Injectable({
 providedIn: 'root'
 })
 export class EmployeeService {
 employees:Observable<any[]>;
 Employee:Observable<any>|undefined;
 constructor(public af:AngularFireDatabase) { 
 this.employees=af.list('/employees/employees').valueChanges();
  }
 getEmployees(){
 return this.employees;
 }
 addEmployee(employee:Employee){
 this.employees=this.employees.push(employee);

 }
 }

這是 AddEmployeeComponent：

 import { EmployeeService } from './../../serivices/employee.service';

 import { Component, OnInit } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import {Employee}from '../Employee'
 import {FlashMessagesService} from 'angular2-flash-messages'; 
 import {Router} from '@angular/router'; 
 
 @Component({
 selector: 'app-add-employee',
 templateUrl: './add-employee.component.html',
 styleUrls: ['./add-employee.component.css']
 })
 export class AddEmployeeComponent implements OnInit {
 employee:Employee={
 firstName:"",           
 lastName:"",  
 email:"",
 country:"",
 city:"",
 phone:0,
 salary:0
  }
 disablesalary:boolean=true; 
 constructor( public flashmessagesservices:FlashMessagesService,public router:Router,public 
 employeeservice:EmployeeService) { }

 ngOnInit(): void {
 }
 mysubmit(fo:NgForm){
 if (!fo.valid) {
 console.log("is not valid",fo.valid);
 this.flashmessagesservices.show('please write your correct info',
 {cssClass:'alert-danger',timeout:3000});
 this.router.navigate(['add-employee']);
 }else{
 this.employeeservice.addEmployee(fo.value);
 //console.log("is valid",fo.valid);
 // console.log(this.employee);
 };

 }
 }

這是員工界面

 export interface Employee{
 $key?:string;             
 firstName?:string;            
 lastName?:string;  
 email?:string;
 country?:string;
 city?:string;
 phone?:number;
 salary?:number;                          
 }  
 

這是我的 html 代碼：

   <style >
      .container{
         margin-top: 3px;
       }
      .container #back{
       margin-left:60%;
        }
       </style>
       <div class="container">
             <div class="row">
                <div class="col-sm-6">
                   <h3>Add Employee <i class="fa fa-plus-square" aria-hidden="true"></i></h3>
                   <form novalidate #fo="ngForm" (ngSubmit)="mysubmit(fo)">
                      <!--first name -->
                      <div class="mb-3">
                          <label for="firstname" class="form-label">Firstname</label>
                           <input type="text" class="form-control" id="firstname" 
                            [(ngModel)]="employee.firstName"  
                            #employeefirstname="ngModel" required minlength="4" name="firstname"> 
              
                            <div *ngIf="employeefirstname.errors?.required && 
                              employeefirstname.touched " #val class="alert alert-danger">
                              First name is required
                            </div>
                            <div *ngIf="employeefirstname.errors?.minlength && 
                                employeefirstname.touched" class="alert alert-danger"> the length is 
                                 too low</div>
                            </div>
            
                           <!--last name -->
                             <div class="mb-3">
                 <label for="lastname" class="form-label">Last Name</label>
                <input type="text" class="form-control" id="lastname" [(ngModel)]="employee.lastName"  
                #employeelastname="ngModel" required minlength="4" name=lastname> 
                <div *ngIf="employeelastname.errors?.required && employeelastname.touched" 
                 class="alert alert-danger" [ngStyle]="{'border-right:':'2px solid red'}">
                   name is required
                </div>
                <div *ngIf="employeelastname.errors?.minlength && employeelastname.touched" 
               class="alert alert-danger">the length is too low</div>
              </div>

              <!--email name -->
            <div class="mb-3">
                <label for="email" class="form-label">email</label>
                <input type="email" class="form-control" id="email" [(ngModel)]="employee.email"  
                #employeeemail="ngModel" required minlength="4" name="email"> 
                <div *ngIf="employeeemail.errors?.required && employeeemail.touched" class="alert 
                alert-danger">
                  email is required
                </div>
              </div>
              

              <!--country  -->
            <div class="mb-3">
                <label for="country" class="form-label">country</label>
                <input type="text" class="form-control" id="country" [(ngModel)]="employee.country"  
                #employeecountry="ngModel" required minlength="4" name="country"> 
                <div *ngIf="employeecountry.errors?.required && employeecountry.touched" class="alert 
                  alert-danger">
                  country  is required
                </div>
              </div>

                <!--city  -->
            <div class="mb-3">
                <label for="city" class="form-label">city</label>
                <input type="text" class="form-control" id="city" [(ngModel)]="employee.city"  
                #employeecity="ngModel" required minlength="4" name="city"> 
                <div *ngIf="employeecity.errors?.required && employeecity.touched" class="alert 
                 alert-danger">
                  city is required
                </div>
              </div>


                 <!--phone  -->
            <div class="mb-3">
                <label for="phone" class="form-label">phone</label>
                <input type="number" class="form-control" id="city" [(ngModel)]="employee.phone"  
                #employeephone="ngModel" required minlength="4" name="phone"> 
                <div *ngIf="employeephone.errors?.required && employeephone.touched" class="alert 
                   alert-danger">
                  phone is required
                </div>
              </div>

                  <!--salary  -->
            <div class="mb-3">
                <label for="salary" class="form-label">salary</label>
                <input type="number" class="form-control" id="city" [(ngModel)]="employee.salary"  
                #employeesalary="ngModel" required minlength="4" name="salary" 
                 [disabled]="disablesalary"><!--use it to disable any thing in html--> 
                <div *ngIf="employeesalary.errors?.required && employeesalary.touched" class="alert 
                 alert-danger">
                  salary is required
                </div>
              </div> 

                  <button type="submit" class="btn btn-success">Submit</button>
             </form> 
               </div>
            <div class="col-sm-6">
                 <a href="#" routerLink="/">
                       <button class="btn btn-warning" id="back"> <i class="fa fa-arrow-left" aria- 
                        hidden="true"></i> Back to dashbord </button>
                 </a>
                  </div>   
                   </div>
                       </div>