Question

我想从用户那里获取输入并检查它的值是否与firebase数据库中存在的值匹配。

我想构建一个提供signUp user和signIn功能的登录组件。我知道它可以通过 Auth 实现，但我想使用自定义数据。我能够执行CRUD操作。enter image description here

这是login.component.ts，我想在其中实现函数

export class LoginComponent implements OnInit {

  adminval: string;
  passwordval : string;

  newnew : string = 'employeeService.loginData.admin';

  loginList : LoginID[];

  constructor(private employeeService : EmployeeService, private router : Router) { }

  ngOnInit() {
    this.employeeService.getLoginData();

    var x = this.employeeService.getLoginData();
    x.snapshotChanges().subscribe(item =>{
      this.loginList = [];
      item.forEach(element => {
        var y = element.payload.toJSON();
        y["$key"] = element.key;
        this.loginList.push(y as LoginID);
      })
    })
  }

  onEdit(emp : LoginID){
    this.employeeService.loginData = Object.assign({}, emp);
  }

  onLogin(loginForm : NgForm){
    if(this.adminval == this.employeeService.loginData.admin){
      alert("OK");     
    }
    else
      alert("Not OK");
  }
}

这里是login.component.html文件代码

<body style="background-color:#DD3247">
    <div class="container" style="padding-top: 10%; padding-bottom: 8.1%;">
        <div class="row justify-content-md-center">
            <div class="col-md-5 login-box">
              <h1 class="text-center login-text-color">Login</h1>
              <hr>
              <form #loginForm="ngForm">
                <input type="hidden" name="$key" #$key="ngModel" [(ngModel)]="employeeService.loginData.$key">
                <input type="hidden" name="admin" #admin="ngModel" [(ngModel)]="employeeService.loginData.admin" placeholder="Admin">
                <input type="hidden" name="password" #password="ngModel" [(ngModel)]="employeeService.loginData.password" placeholder="Password">

                <div class="form-row">
                    <div class="col-md-12">
                        <input type="text" class="form-control form-control-lg flat-input" name="adminvalue" #adminvalue="ngModel" [(ngModel)]="adminval" placeholder="Admin" required>
                    </div>
                    <div class="col-md-12">
                        <input type="password" class="form-control form-control-lg flat-input" name="passwordvalue" #passwordvalue="ngModel" [ngModel]="passwordval" placeholder="Password" required>
                    </div>
                    <button type="submit" class="btn btn-lg btn-block btn-login" (click)="onLogin(loginForm)">Login</button>
                </div>
              </form>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row justify-content-md-center">
            <h6 class="text-center">Employee Register</h6><br>
            <table class="table table-sm table-hover">
              <tr *ngFor="let login of loginList">
                <td>{{login.admin}}</td>
                <td>{{login.password}}</td>
                <td>
                    <a class="btn" (click)="onEdit(login)">
                        <i class="fa fa-pencil-square-o"></i>
                    </a>
                    <a class="btn">
                        <i class="fa fa-trash-o"></i>
                    </a>
                </td>
              </tr>
            </table>
        </div>
    </div>
</body>

不知何故，我能够通过匹配用户名值但通过错误的实现来实现。您可以看到HTML文件中有3个输入隐藏字段，因此首先我必须单击编辑图标，然后将现有数据插入隐藏字段，然后如果来自 adminval 的输入匹配 admin 隐藏字段之一，然后显示OK，否则为Ok。

Angular - 从用户那里获取输入并将其值检入firebase数据

0 个答案: