我是angular2和打字稿的新手，已经花了半天的时间来弄清楚ng2表格。我已完成所有路线并构建了所有必要的表格，目前正在尝试了解如何使用打字稿在angular2中发布
这是我的错误：
[默认]中的错误 simpleapp / src目录/应用/用户/添加的客户端/附加client.component.ts：52：16 物业＆＃39; http＆＃39;类型＆＃39; AddClientComponent＆＃39;。
上不存在
我无法找到这个问题的来源。我已经在我的组件中导入了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 { }
答案 0 :(得分：26)
只需添加private即可使您的Http实例可用于整个组件：
constructor(private http: Http)
答案 1 :(得分：0)
它与您的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);
}
答案 2 :(得分：0)
您必须在导出声明中导出模块中的Http模块。
@NgModule({
imports: [CommonModule, RouterModule, ReactiveFormsModule, ],
declarations: [ ErrorMessagesComponent, FoodDashboardComponent ],
exports: [ CommonModule, ReactiveFormsModule, HttpModule, RouterModule, ]
})
答案 3 :(得分：0)
问题错误TS2339：通过在构造函数构造函数中将http设为私有，解决了类型“ FoodListComponent”上不存在属性“ http”的问题（私有http：Http）{ this.http = http; }