这是我的login.component.html
<form #user class="form-horizontal" method="post" (ngSubmit)="login($event)">
<label for="email" class="cols-sm-2 control-label">Your Email</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="email" [(ngModel)]="user.email" placeholder="Enter your Email"/>
</div>
<label for="password" class="cols-sm-2 control-label">Password</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="password" [(ngModel)]="user.password" placeholder="Enter your Password"/>
</div>
<div class="form-group ">
<button type="submit" class="btn btn-primary btn-lg btn-block login-button">Login</button>
</div>
</form>
这是我的login.component.ts 导出类LoginComponent {
user = {email:'', password:''};
constructor (private dataservice: DataService){
}//End of constructor
//Login Function
login(){
console.log(this.user);
this.dataservice.loginValidate(this.user).subscribe(data => {
console.log(data);
},error => {
console.log(error);
}
);
}//end of function
}
这是我的data.service.ts
@Injectable()
export class DataService {
constructor(private http: HttpClient){}
//Method to login validate
loginValidate(user) {
const post_data = this.http.post('http://localhost/charan/postdata.php',{
username: user.email,
password: user.password
}).subscribe(
res => {
console.log(res);
}
);
}
}
当我尝试发布表单数据时，它显示如下错误：
错误类型错误：无法读取属性＆＃39;订阅＆＃39;未定义的 在LoginComponent.push ../ src / app / login / login.component.ts.LoginComponent.login（login.component.ts:35） at Object.eval [as handleEvent]（LoginComponent.html：9） at handleEvent（core.js：9953） at callWithDebugContext（core.js：11046） at Object.debugHandleEvent [as handleEvent]（core.js：10749） at dispatchEvent（core.js：7415） 在core.js：8892 在SafeSubscriber.schedulerFn [as _next]（core.js：3415） 在SafeSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.SafeSubscriber .__ tryOrUnsub（Subscriber.js：195） 在SafeSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.SafeSubscriber.next（Subscriber.js：133）
这是我的package.json
{
＆＃34; name＆＃34;：＆＃34; exproj1＆＃34;， ＆＃34;版本＆＃34;：＆＃34; 0.0.0＆＃34;， ＆＃34;脚本＆＃34;：{ ＆＃34; ng＆＃34;：＆＃34; ng＆＃34;， ＆＃34;开始＆＃34;：＆＃34; ng serve＆＃34;， ＆＃34;构建＆＃34;：＆＃34; ng build＆＃34;， ＆＃34;测试＆＃34;：＆＃34; ng test＆＃34;， ＆＃34; lint＆＃34;：＆＃34; ng lint＆＃34;， ＆＃34; e2e＆＃34;：＆＃34; ng e2e＆＃34; }， ＆＃34;私人＆＃34;：是的， ＆＃34;依赖＆＃34;：{ ＆＃34; @ angular / animations＆＃34;：＆＃34; ^ 6.0.3＆＃34;， ＆＃34; @ angular / common＆＃34;：＆＃34; ^ 6.0.3＆＃34;， ＆＃34; @ angular / compiler＆＃34;：＆＃34; ^ 6.0.3＆＃34;， ＆＃34; @ angular / core＆＃34;：＆＃34; ^ 6.0.3＆＃34;， ＆＃34; @ angular / forms＆＃34;：＆＃34; ^ 6.0.3＆＃34;， ＆＃34; @ angular / http＆＃34;：＆＃34; ^ 6.0.3＆＃34;， ＆＃34; @ angular / platform-browser＆＃34;：＆＃34; ^ 6.0.3＆＃34;， ＆＃34; @ angular / platform-browser-dynamic＆＃34;：＆＃34; ^ 6.0.3＆＃34;， ＆＃34; @ angular / router＆＃34;：＆＃34; ^ 6.0.3＆＃34;， ＆＃34; core-js＆＃34;：＆＃34; ^ 2.5.4＆＃34;， ＆＃34; rxjs＆＃34;：＆＃34; ^ 6.2.1＆＃34;， ＆＃34; zone.js＆＃34;：＆＃34; ^ 0.8.26＆＃34; }， ＆＃34; devDependencies＆＃34;：{ ＆＃34; @ angular / compiler-cli＆＃34;：＆＃34; ^ 6.0.3＆＃34;， ＆＃34; @ angular-devkit / build-angular＆＃34;：＆＃34; ~0.6.6＆＃34;， ＆＃34;打字稿＆＃34;：＆＃34; ~2.7.2＆＃34;， ＆＃34; @ angular / cli＆＃34;：＆＃34; ~6.0.7＆＃34;， ＆＃34; @ angular / language-service＆＃34;：＆＃34; ^ 6.0.3＆＃34;， ＆＃34; @ types / jasmine＆＃34;：＆＃34; ~2.8.6＆＃34;， ＆＃34; @ types / jasminewd2＆＃34;：＆＃34; ~2.0.3＆＃34;， ＆＃34; @ types / node＆＃34;：＆＃34; ~8.9.4＆＃34;， ＆＃34; codelyzer＆＃34;：＆＃34; ~4.2.1＆＃34;， ＆＃34; jasmine-core＆＃34;：＆＃34; ~2.99.1＆＃34;， ＆＃34; jasmine-spec-reporter＆＃34;：＆＃34; ~4.2.1＆＃34;， ＆＃34;业力＆＃34;：＆＃34; ~1.7.1＆＃34;， ＆＃34; karma-chrome-launcher＆＃34;：＆＃34; ~2.2.0＆＃34;， ＆＃34; karma-coverage-istanbul-reporter＆＃34;：＆＃34; ~2.0.0＆＃34;， ＆＃34; karma-jasmine＆＃34;：＆＃34; ~1.1.1＆＃34;， ＆＃34; karma-jasmine-html-reporter＆＃34;：＆＃34; ^ 0.2.2＆＃34;， ＆＃34;量角器＆＃34;：＆＃34; ~5.3.0＆＃34;， ＆＃34; ts-node＆＃34;：＆＃34; ~5.0.1＆＃34;， ＆＃34; tslint＆＃34;：＆＃34; ~5.9.1＆＃34; } }
请帮我解决这个问题。
提前致谢
答案 0 :(得分：0)
我可以展示代码示例。
<强> login.component.html
<form class="pt-3" (submit)="onLogin()">
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" [(ngModel)]="email" name="email" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" [(ngModel)]="password" name="password" class="form-control" placeholder="should have min. 6 character with a number">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Keep Me logged in for 7 days</label>
</div>
<button type="submit" class="btn btn-primary mt-3">Login</button>
</form>
<强> login.component.ts
export class LoginComponent implements OnInit {
email: String;
password : String;
onLogin(){
const user = {
email: this.email,
password: this.password
}
this.authService.authenticateUser(user).subscribe(data => {
if(data.success){
this.authService.storeUserData(data.token, data.user);
this.flashMessage.show('succefully loggedin !', {cssClass: 'alert-success', timeout: 5000});
this.router.navigate(['/user/dashboard']);
} else {
this.flashMessage.show(data.msg, {cssClass: 'alert-danger', timeout:2000});
this.router.navigate(['/auth/login']);
}
});
}
}
<强> auth.service.ts
authenticateUser(user){
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.post(this.url + `/users/authenticate`, user, {headers: headers})
.map(res => res.json())
}
答案 1 :(得分：-1)
从表单中删除#user ref或更改其名称。如果您将此实例用于ts，则会出现问题。