Angular2：JSON 渲染

Question

我是 Angular 2 的新手，想检查用户是否输入了正确的用户名和密码。

我附上了 JSON 格式。我还需要将值从一个组件传递到另一个组件。除了 localstorage 之外，还有什么功能可以缓存值。

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { LoginService } from '../login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [LoginService]
})
export class LoginComponent {
usernameModel: string;
passwordModel: string;
validLogin: Boolean;
loginData: any;
loginDataLength: number;
  constructor(private router: Router, private loginService: LoginService) { }

  homeNav(){

    this.loginService.getLoginData()
      .subscribe(data => {
        this.loginData = data;
        this.loginDataLength = data.length;
      });

      for(var i = 0; i < this.loginDataLength; i++)
      {
        if(this.loginData[i].username === this.usernameModel){
            console.log(this.loginData[i].username+', '+this.loginData[i].password);
        }
        else{
            console.log('Login issue');
        }
      };

  }
}

/* JSON

[{
	"username": "jay",
	"password": "jay",
	"userType": "standard"
}, {
	"username": "Admin",
	"password": "Admin",
	"userType": "admin"
}, {
	"username": "newuser",
	"password": "newuser",
	"userType": "standard"
}, {
	"username": "anonmyous",
	"password": "anonmyous",
	"userType": "standard"
}]

*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="loginBox">
    <div class="alert alert-danger" *ngIf="validLogin === false">
        <strong>Alert!</strong> Wrong Username/Password.
    </div>
    <form class="form-group" #loginForm="ngForm">
        <div class="input-group">
          <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
          <input type="text" class="form-control" placeholder="Username" [(ngModel)]="usernameModel" name="username" #username="ngModel" required />
          <span class="input-group-addon errorBox" *ngIf="username.errors && (username.dirty || username.touched)">
              <i class="glyphicon glyphicon-exclamation-sign" [hidden]="!username.errors.required"></i>
          </span>
        </div>
        <div class="input-group">
          <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
          <input type="password" class="form-control" placeholder="Password" [(ngModel)]="passwordModel" name="password" #password="ngModel" required />
          <span class="input-group-addon errorBox" *ngIf="password.errors && (password.dirty || password.touched)">
              <i class="glyphicon glyphicon-exclamation-sign" [hidden]="!password.errors.required"></i>
          </span>
        </div>
        <button class="btn btn-primary btn-block" [disabled]="!loginForm.valid" (click)="homeNav()" >Login</button>
    </form>
</div>

Answer 1

首先您必须等到getLoginData 解决，其次不要将密码带到客户端：

   //... 

   constructor(private router: Router, private loginService: LoginService) { }

   ngOnInit(){

    this.loginService.getLoginData()
      .subscribe(data => {
        this.loginData = data;
        this.loginDataLength = data.length;
      });
  }
  homeNav(){
      for(var i = 0; i < this.loginDataLength; i++)
      {
        if(this.loginData[i].username === this.usernameModel){
            console.log(this.loginData[i].username+', '+this.loginData[i].password);
        }
        else{
            console.log('Login issue');
        }
      };

  }
}

Answer 2

您可以使用共享服务。

Here an official example on angular.io