问Angular-Firebase LogIn

EN

       import { Component, OnInit } from '@angular/core';
       import {CredentialService } from '../../services/credential.service';

      import { Credential } from '../../models/credentials';

     @Component({
     selector: 'app-member-credentials',
     templateUrl: './member-credentials.component.html',
     styleUrls: ['./member-credentials.component.css']
     })
     export class MemberCredentialsComponent implements OnInit {
     credentials: Credential[];
     Username ='';
     Password = '';
     public errorMsg = '';

       constructor(private credentialService: CredentialService) { }

      ngOnInit() {
       this.credentialService.getCredentials().subscribe(credentials =>{
       this.credentials=credentials;
      })
    }

  login(){
      //Where I want to implement the click.
   }

    }

   member-credentials.component.html
     <div *ngFor="let credential of credentials" class="container" >
        <div class="title">
            Welcome
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="input-field col s12">
                    <input type="text" class="validate" 
                   [(ngModel)]="credential.Username"  placeholder="User Name">
                </div>
            </div>

            <div class="row">
                <div class="input-field col s12">
                    <input type="password" class="validate" 
              [(ngModel)]="credential.Password"  placeholder="Password">
             </div>
            </div>

            <!--<span>{{errorMsg}}</span>-->
            <button (click)="login()" 
                class="btn waves-effect waves-light" 
                type="submit" name="action">Login</button>
        </div>
    </div>    

   credential.service.ts
    import { Injectable } from '@angular/core';
    import { AngularFirestore, AngularFirestoreCollection, 
           AngularFirestoreDocument } from 'angularfire2/firestore';
    import { Observable } from 'rxjs/Observable';

    import { Credential } from '../models/credentials';

   @Injectable()
 export class CredentialService {
   credentialCollection: AngularFirestoreCollection<Credential>;
   credentials: Observable<Credential[]>;

    constructor(public afs: AngularFirestore) {
    this.credentials = this.afs.collection('MemberDetails').valueChanges();
   }

    getCredentials(){
      return this.credentials;

   }

   }