Свойство 'http' не существует на типе 'Компонент', Угловой 2

Question

Я новичок в angular2 и машинописном тексте и уже потратил полдня, чтобы разобраться с формами ng2. Я закончил все свои маршруты и строили всю необходимую форму и в настоящее время пытаются понять, как разместить в angular2 с машинописи

Это моя ошибка:

ERROR in [default] simpleapp/src/app/clients/add-client/add-client.component.ts:52:16 Property 'http' does not exist on type 'AddClientComponent'.

И я не могу найти, где эта проблема как. Я импортировал angular/http в свой компонент, я предоставил заголовок и ответ, как сказано в официальном руководстве, но все еще может видеть эту проблему. Что мне не хватает, и где моя проблема? спасибо заранее

Это мой компонент:

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); 

    } 
} 

Это мой шаблон:

<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> 

Это мой модуль:

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 { } 

Answer 1

private Просто добавьте, чтобы сделать ваш Http экземпляр доступен для всех ваших компонент:

constructor(private http: Http) 

Answer 2

Это что-то делать с вашей http переменным попробовать этот

В вашем component.ts

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

Вы можете попробовать

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

Answer 3

Вы должны экспортировать модуль Http в модуль в декларации экспорта.

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