Question

当我尝试在我的componentsnet中使用该服务并在构造函数中声明它时，我收到此错误TypeError：无法设置只有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();
        });


    }

}

和app module 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 { }

Answer 1

从'@ angular / http'导入{HttpModule};在应用程序模块ts 并将其添加到NgModule导入

中

Answer 2

您的Html中可能有ngModel，为此，您需要非常小心。

您不能在formGroup中单独使用ngModel。它仅适用于formGroupName

TypeError：无法设置只有getter的[object Object]的属性堆栈

2 个答案: