json输入意外结束

Question

我想在用户注册后显示警报。我试过调试并了解它总是会出错（当用户注册成功并且用户已经存在时）。

以下是我的代码。我无法理解为什么它总是出错。 任何帮助表示赞赏，因为我长期坚持这一点。提前致谢。

1）Alert组件

import { AlertService } from './../../shared/services/alert.service'; 
import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-alert', 
    templateUrl: './alert.component.html', 
    styleUrls: ['./alert.component.css'] 
}) 
export class AlertComponent { 

    private _alertService; 
    private message: any; 

    constructor(alertService: AlertService) { 
    this._alertService = alertService; 

    } 

    ngOnInit() { 
     this._alertService.getMessage().subscribe(message => { this.message = message; }); 
    } 

} 

2.Alert模板

<div *ngIf="message" [ngClass]="{ 'alert': message, 'alert-success': message.type === 'success', 
     'alert-danger': message.type === 'error' }">{{message.text}}</div> 

3）注册模板

<div class="container"> 

    <h2>Register</h2> 
    <form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate> 
     <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }"> 
      <label for="username">Username</label> 
      <input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required /> 
      <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div> 
     </div> 
     <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }"> 
      <label for="password">Password</label> 
      <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required minlength="10" /> 
      <div *ngIf="f.submitted && !password.valid" class="help-block"> Password is required (minimum 10 characters)</div> 
     </div> 
     <div class="form-group"> 
      <button class="btn btn-primary" (click)="registerUser()">Register</button> 
       <app-alert></app-alert> 
      <a [routerLink]="['']" class="btn btn-link">Cancel</a> 
     </div> 

    </form> 
</div> 

4）注册组件

import { AlertService } from './../../shared/services/alert.service'; 
import { RegisterService } from './../../shared/services/register.service'; 
import { Observable } from 'rxjs/Observable'; 
import { Component, OnInit } from '@angular/core'; 
import { Router, ActivatedRoute } from '@angular/router'; 
import { AuthService } from '../../shared/services/index'; 
import { Http, Request, RequestMethod, RequestOptions, Headers, Response } from '@angular/http'; 
@Component({ 
    selector: 'app-register', 
    templateUrl: './register.component.html', 
    styleUrls: ['./register.component.css'] 
}) 
export class RegisterComponent implements OnInit { 
    private _authService: AuthService; 
    private _alertService: AlertService; 
    private _regsiterService: RegisterService; 
    private appContent = 'application/json'; 
    private _router: Router; 
    private baseUrl = 'http://localhost:5000/api/v1/'; 
    model: any = {}; 
    username: string; 
    password: string; 

    constructor(authService: AuthService, http: Http, router: Router, registerService: RegisterService, alertService: AlertService) { 
    this._authService = authService; 
    this._regsiterService = registerService; 
    this._router = router; 
    this._alertService = alertService; 
    } 

    ngOnInit() { 
    } 
     registerUser() { 
     this._regsiterService.registerUser(this.model.username, this.model.password) 
      .subscribe(
       data => { 
        console.log('Calling alert'); 
        this._alertService.success('Registration Successful'); 
        this._router.navigate(['/login']); 
       }, 
       error => { 
         console.log('Calling alert'); 
        // this._alertService.error(error); 
       }); 
    } 

} 

5）紧急服务

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import {Subject} from 'rxjs/Subject'; 


@Injectable() 
// Checks if a user is a authenticated user and has the valid token without expiration. 
export class AlertService { 

     private subject = new Subject<any>(); 
     success(message: string) { 
      console.log('Registration Successful'); 
     this.subject.next({ type: 'success', text: message }); 
     } 
    // error(message: string) { 
    //   console.log('Registration Failed'); 
    //  this.subject.next({ type: 'error', text: message }); 
    // } 
     getMessage(): Observable<any> { return this.subject.asObservable(); } 
} 

下面是错误截图

Answer 1

在你的HTML您有：

(ngSubmit)="f.form.valid && register()" 

但是你的方法是：

registerUser() { 
    // .. 
} 

所以角度分析器找不到在您的html中定义的register方法。

Answer 2

JSON输入意外结束

此错误通常当你有一个http调用被失败无论出于何种原因发生的（错误的URL，服务器关闭，端口是关闭的）和返回的响应从服务器不是JSON。

看看你的网络标签，看看你正在制作的http cal，你在响应标签中得到了什么。

基本上这个错误通常意味着，使用Javascript一直无法解析的东西，它的意思是JSON

Answer 3

如果我是你，我会为您在模板和TS文件错别字。

此外，您还可以尝试在该文件的顶部，只需导入服务，只需添加它们在构造是这样的：

constructor(private authService: AuthService, private http: Http, private router: Router, private registerService: RegisterService, private alertService: AlertService) { }

我觉得TS会为你分配。 然后onInit()或其他你可以写的地方this.authService.someMethod()等

确定“not a function”错误表示拼写错误/拼写错误。

由于已经提到register()已存在于您的html模板中，但不存在于ts文件中。我会重新命名RegisterComponent的属性，以确保将来可以避免可能的拼写错误和错误。

Answer 4

Unexpected end of json input可能是由于您没有从您的服务器提供有效的json。 我还没有看到this._regsiterService.registerUser里面的代码。但我相信有一个导致问题的response.json（）调用。