2017-06-14 215 views
1

我現在正在使用Angular,但不是專家。我正試圖創建一個簡單的用戶登錄和密碼頁面,而不是現在的後端服務。字符串包含無效字符?

一旦我輸入密碼,我想將我的頁面路由到儀表板。我正在使用核心UI框架和角色4.有幾個錯誤,但已經在這裏的人的幫助下解決了。現在我有一個未被捕獲的錯誤。我如何解決以下錯誤?

login.component.ts

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { DashboardComponent } from '../dashboard/dashboard.component'; 

declare var Dashboard:any; 

@Component({ 
templateUrl: 'login.component.html', 
}) 
export class LoginComponent { 
data: any = {}; 
constructor(private router: Router){} 
formSubmit(){ 
if(this.data.username == "admin" && this.data.password == "admin"){ 
    this.router.navigate([Dashboard]); 
} 
} 
} 

login.component.html

<div class="app flex-row align-items-center" (ngSubmit)="formSubmit()"> 
    <div class="container"> 
    <div class="row justify-content-center"> 
    <div class="col-md-8"> 
    <div class="card-group mb-0"> 
    <div class="card p-2"> 
    <div class="card-block"> 
      <h1>Login</h1> 
      <p class="text-muted">Sign In to your account</p> 
      <div class="input-group mb-1"> 
      <span class="input-group-addon"><i class="icon-user"></i></span> 
      <input type="text" class="form-control" placeholder="Username" [(ngModel)="data.username"]> 
      </div> 
      <div class="input-group mb-2"> 
      <span class="input-group-addon"><i class="icon-lock"></i></span> 
      <input type="password" class="form-control" placeholder="Password" [(ngModel)="data.password" > 
      </div> 
      <div class="row"> 
      <div class="col-6"> 
      <button type="button" class="btn btn-primary px-2">Login</button> 
     </div> 
     </div> 
     </div> 
     </div> 
     </div> 
     </div> 
     </div> 
     </div> 
     </div> 

回答

2

您需要定義你的屬性的類型。 Object不包含您的屬性:

interface YourDataType { 
    username?: string; 
    password?: string; 
} 

export class LoginComponent { 
    data: YourDataType = {}; 
    // .... 
    formSubmit() { 
     if (this.data.username == "admin" && this.data.password == "admin") { // No error 
     } 
    } 
} 

或者,如果你不想定義類型,你可以通過指定類型any退出:

export class LoginComponent { 
    data: any = {}; 
    // .... 
    formSubmit() { 
     if (this.data.username == "admin" && this.data.password == "admin") { // No error 
     } 
    } 
} 
+0

謝謝你..,編譯沒有錯誤,但有一個未被捕獲的錯誤..! 「字符串包含無效字符」 –