Geek Answers Handbook

Property 'http' does not exist for type 'Component', Angular 2

I am new to angular2 and typescript and have already spent half a day to deal with ng2 forms. I have finished all my routes and created all the necessary form and am currently trying to figure out how to post to angular2 using typescript

That's my fault:

ERROR in [default] simpleapp / SRC / application / clients / add-client / Add-client.component.ts: 52: 16 The property 'http' does not exist in the type 'AddClientComponent'.

And I can’t find where this problem came from. I imported angular/http into my component, I provided the header and response as stated in the official manual, but can still see this problem. What am I missing and where is my problem? thanks in advance

This is my component :

 import 'rxjs/add/operator/map'; import {Component} from '@angular/core'; import {Http, Response, RequestOptions, Headers} from '@angular/http'; import {Employee} from "./model/add-client.model"; @Component({ selector: 'app-add-client', templateUrl: 'add-client.component.html', styleUrls: ['add-client.component.css'] }) export class AddClientComponent { departments: Array<any>; firstName: ''; lastName: ''; id: null; salary: null; phone: null; departmentId: null; constructor(http: Http) { http.get('api/departments') .map((res: Response) => res.json()) .subscribe((departments: Array<any>) => this.departments = departments); } model = new Employee( this.id, this.firstName, this.lastName, this.salary, this.departmentId, this.phone ); submitted = false; addEmployee = 'api/employees' handleError = 'Post Error'; onSubmit(model) { this.submitted = true; let body = JSON.stringify({ model }); let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers }); return this.http.post(this.addEmployee, body, options) .catch(this.handleError); } }

This is my template :

  <div class="container"> <md-card class="demo-card demo-basic"> <md-card-title color="primary back-header">Employee Form</md-card-title> <md-card-content> <form (ngSubmit)="onSubmit(model)" #employeeForm="ngForm"> <md-toolbar for="firstName">First Name</md-toolbar> <md-input class="demo-full-width input-text" type="text" id="firstName" required [(ngModel)]="model.firstName" name="firstName" #firstName="ngModel"> </md-input> <md-toolbar for="lastName">Last Name</md-toolbar> <md-input class="demo-full-width input-text" type="text" id="lastName" required [(ngModel)]="model.lastName" name="lastName" #lastName="ngModel"> </md-input> <md-toolbar for="salary">Salary</md-toolbar> <md-input class="demo-full-width input-text" type="number" id="salary" placeholder="USD" required [(ngModel)]="model.salary" name="salary" #salary="ngModel"> </md-input> <md-toolbar for="departmentId">Department</md-toolbar> <select class="demo-full-width option-department input-text" id="departmentId" required [(ngModel)]="model.departmentId" name="departmentId" #departmentId="ngModel"> <option *ngFor="let department of departments" [value]="department.id">{{department.name}} </option> </select> <md-toolbar for="phone">Phone</md-toolbar> <md-input class="demo-full-width input-text" type="number" id="phone" placeholder="phone #" required [(ngModel)]="model.phone" name="phone" #phone="ngModel"> </md-input> <button md-raised-button color="primary" type="submit" class="btn btn-default" [disabled]="!employeeForm.form.valid">Submit </button> </form> </md-card-content> </md-card> <md-card [hidden]="!submitted"> <md-card-title>You submitted the following:</md-card-title> <md-list> <md-list-item> <label>First Name:</label> {{model.firstName}} </md-list-item> <md-list-item> <label>Last Name:</label> {{model.lastName}} </md-list-item> <md-list-item> <label>Salary:</label> {{model.salary}} </md-list-item> <md-list-item> <label>Department:</label> {{model.departmentId}} </md-list-item> <md-list-item> <label>Phone:</label> {{model.phone}} </md-list-item> </md-list> </md-card> </div>

This is my module :

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { MaterialModule } from '@angular/material'; import {MdListModule} from '@angular/material/list'; import { AppComponent } from './app.component'; import { routing, appRoutingProviders } from './app.routing'; //============== import { ClientsComponent } from './clients/clients.component'; import { DepartmentsComponent } from './departments/departments.component'; import { AddClientComponent } from './clients/add-client/add-client.component'; import { AddDepartmentComponent } from './departments/add-department/add-department.component'; @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, routing, MaterialModule.forRoot(), MdListModule.forRoot() ], declarations: [ AppComponent, ClientsComponent, DepartmentsComponent, AddClientComponent, AddDepartmentComponent ], providers: [appRoutingProviders], bootstrap: [AppComponent] }) export class AppModule { }
+7
angular forms typescript
source share
3 answers

Just add private to make your Http instance available to your entire component:

 constructor(private http: Http)
+15
source

It has something to do with your http variable, try this

In your component.ts

 constructor(http: Http) { http.get('api/departments') .map((res: Response) => res.json()) .subscribe((departments: Array<any>) => this.departments = departments); }

You can try

 constructor(private http: Http) { http.get('api/departments') .map((res: Response) => res.json()) .subscribe((departments: Array<any>) => this.departments = departments); }
0
source

You must export the Http module to the module in the export declaration.

 @NgModule({ imports: [CommonModule, RouterModule, ReactiveFormsModule, ], declarations: [ ErrorMessagesComponent, FoodDashboardComponent ], exports: [ CommonModule, ReactiveFormsModule, HttpModule, RouterModule, ] })
0
source

More articles:


All Articles