Angular2：JSON渲染

Question

我是Angular 2的新手，想檢查用戶是否輸入了正確的用戶名和密碼。

我附加了JSON格式。另外我需要將一個組件的值傳遞給另一個組件。有什麼功能可以緩存local storage以外的值。

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 
 

 
[{ 
 
\t "username": "jay", 
 
\t "password": "jay", 
 
\t "userType": "standard" 
 
}, { 
 
\t "username": "Admin", 
 
\t "password": "Admin", 
 
\t "userType": "admin" 
 
}, { 
 
\t "username": "newuser", 
 
\t "password": "newuser", 
 
\t "userType": "standard" 
 
}, { 
 
\t "username": "anonmyous", 
 
\t "password": "anonmyous", 
 
\t "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