2017-01-18 23 views
2

當我嘗試在我的組件中使用服務並在構造函數中聲明它時,出現此錯誤TypeError:無法設置[object對象]它只有一個getterTypeError:無法設置只有一個getter的[object Object]的屬性堆棧

下面我有我的代碼

import { Component } from '@angular/core'; 
import { FormBuilder,FormGroup} from '@angular/forms'; 
import { LoginService } from '../../services/login.service'; 

@Component({ 
    selector: 'login-selector', 
    templateUrl: './app/components/login/login.component.html', 
}) 

export class LoginComponent { 

    form:FormGroup; 
    items:Object; 

    constructor(
     private formBuilder:FormBuilder, 
     private loginService:LoginService){ 

    } 
    ngOnInit() { 
     this.form=this.formBuilder.group({ 
      userName:this.formBuilder.control(''), 
      password:this.formBuilder.control(''), 
      remember:this.formBuilder.control(''), 
      textCaptcha:this.formBuilder.control('') 
     }); 
    } 

onSubmit(loginForm:FormGroup){ 
     this.loginService.getTestJson().subscribe(mediaItems => { 
      this.items = mediaItems; 
     }); 
    } 
} 

服務是

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class LoginService{ 
    constructor(private http: Http) {} 

    getTestJson(){ 
     return this.http.get('http://geo.groupkt.com/ip/172.217.3.14/json').map(response => { 
      return response.json(); 
     }); 


    } 

} 

和應用模塊TS

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { ReactiveFormsModule } from '@angular/forms'; 

import { AppComponent } from './app.component'; 
import { LoginComponent } from './components/login/login.component'; 
import { LoginService } from './services/login.service'; 

@NgModule({ 
    imports:  [ BrowserModule,ReactiveFormsModule ], 
    declarations: [ AppComponent,LoginComponent ], 
    bootstrap: [ AppComponent ], 
    providers:[LoginService] 
}) 
export class AppModule { } 
+0

當我在Components constryctor中定義Login Service時,應用程序未運行。 – user2748108

回答

0

從'@ angular/http'導入{HttpModule};在應用模塊ts 中,並將其添加到NgModule中導入

0

很可能您在您的Html中有ngModel,要這樣做,您需要非常小心。

你不能在formGroup中單獨使用ngModel。它只適用於formGroupName

相關問題