Angular 6：将数据传递到FireBase Collection时出错

Question

Im using Firebase for simple CRUD operations. But when trying to add a value to my collection, I get the following error: CollectionReference.add() requires its first argument to be of type object, but it was: undefined

The Model TS (same as the database)

  export interface Users {
  id?: number,
  user?: string,
  recipe?: string
}

The Service

export class UsersService {

  usersCollection: AngularFirestoreCollection<Users>;
  userDoc: AngularFirestoreDocument<Users>;
  users: Observable<Users[]>;
  user: Observable<Users>;

  constructor(private afs: AngularFirestore) {
    this.usersCollection = afs.collection<Users>('recipes');
    this.users = this.usersCollection.valueChanges();



}

   addRecipe(recipe: Users) {
     this.usersCollection.add(recipe);
  }

Component TS

export class MainComponent implements OnInit {

  users:Users;
  constructor(private usersService:UsersService) { }

  ngOnInit() {
  }


addRecipe(recipe:Users){
  this.usersService.addRecipe(recipe);
}

}

And the HTML

<div class="container">

<div class="jumbotron">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <input class="form-control" type=text [(ngModel)]="users">
    </div>
    <button class="btn btn-danger" (click)="addRecipe()">Recipe</button>
  </div>
</div>

</div>

Could someone explain me why do I get this error and how to solve it?

EDIT: I pretent to add a new value to receipe, in this collection. The trhee documents above are empty

Answer 1

instead of using 'valueChanges()' function in 'this.users = this.usersCollection.valueChanges();'

try using:

    .snapshotChanges()
    .pipe(
     map(changes => {
      return changes.map(change => ({key: change.payload.key, ...change.payload.val()}));
     }))

.snapshotChanges will capture id and other metadata information of the collection.

Answer 2

The solution is on the View. Data has to be passed on the HTML, as Peter suggested

      <input #inputName  type="text" class="form-control" >
 <button class="btn btn-danger" (click)="addRecipe({user: inputName.value})">Save</button>