4

我正在尝试创建一个简单的用户登录和密码页面，目前不使用后端服务。

输入密码后，我想将我的页面路由到仪表板。我正在使用核心 UI 框架和 Angular 4。现在我有一个未捕获的错误。如何解决以下错误？

登录组件.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>
4

2 回答 2

13

在你的情况下，我在你的模板中发现了这样的错字：在>之前的行尾错过<input type="password" class="form-control" placeholder="Password" [(ngModel)="data.password" >了]

我遇到了类似的问题，一切都编译得很好，但在运行时失败了。

于 2019-08-17T15:40:32.613 回答
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
        }
    }
}
于 2017-06-14T09:22:42.100 回答