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（）調用。