名前 'ヘッダー'が見つかりません。角度2で

Question

enter image description here 私は角度2で作業しています。これは私のtsファイルです。コンストラクタでgetRandomQuote（）メソッドを呼び出しました。 しかし、私はプロジェクトを実行するとき私は以下のエラーが表示されます： -
名前 'ヘッダー'が見つかりません。インスタンスメンバー 'this.headers'を意味しましたか？

import {Component, ViewEncapsulation, Injectable} from '@angular/core'; 
import {PaginatePipe, PaginationControlsCmp, PaginationService} from 'ng2-pagination'; 
import { Http, Response, Headers,RequestOptions } from 'angular2/http'; 
import {BasicTablesService} from './basicTables.service'; 
import {BaCard} from '../../../../theme/components'; 
import {HoverTable} from './components/hoverTable'; 
import {BorderedTable} from './components/borderedTable'; 
import {CondensedTable} from './components/condensedTable'; 
import {StripedTable} from './components/stripedTable'; 
import {ContextualTable} from './components/contextualTable'; 
import {ResponsiveTable} from './components/responsiveTable'; 

import {AuthHttp, AuthConfig, AUTH_PROVIDERS } from 'angular2-jwt'; 
import {HTTP_BINDINGS} from 'angular2/http'; 



@Component({ 
    selector: 'basic-tables', 
    viewProviders: [PaginationService], 
    pipes: [PaginatePipe, ResponsiveTable, ContextualTable], 

    encapsulation: ViewEncapsulation.None, 
    directives: [BaCard, HoverTable, BorderedTable, CondensedTable, StripedTable, ContextualTable, ResponsiveTable, PaginationControlsCmp,HTTP_BINDINGS], 
    styles: [require('./basicTables.scss')], 
    template: ` 

<todo-search></todo-search> 

<table class="table table-hover"> 

<div >Enter ID: <input type="text" #listFilter (keyup)="0" style="color:black" /></div> <div>Alert on click<button (click)="clicked()" style="color:black">Click</button></div> 
<span>{{ test }}</span> 
    <tr class="black-muted-bg"> 

     <th class="align-left">ID</th> 
     <th class="align-left">Name</th> 
     <th class="align-left">Protocol</th> 
     <th class="align-left">Inbound Business Process</th> 
     <th class="align-left">Outbound Business Process</th> 

    </tr> 
     <tbody> 
      <tr *ngFor="let item of randomQuote | paginate: { itemsPerPage: 20, currentPage: p } | ResponsiveTable:listFilter.value "> 
     <td>{{item.connectionId}}</td> 
     <td>{{item.name}}</td> 
     <td>{{item.protocol}}</td> 
     <td>{{item.inBoundBPName}}</td> 
     <td>{{item.outBoundBPName}}</td> 


    </tr> 
</tbody> 
     <pagination-controls (pageChange)="p = $event" #api></pagination-controls> 
    </table> 

    `, 
    providers: [BasicTablesService] 
}) 
export class BasicTables { 




    public body = JSON.stringify(
    { 
    "startIndex": 0, 
    "numofIds": 15, 
    "programId": null, 
    "emailId":"admin@justransform.com", 
    "searchStr":"", 
    "transactionId":"", 
    "status":"", 
    "srcConnectionName":"", 
    "destConnectionName":"", 
     "inBoundBPName":"", 
     "outBoundBPName":"", 
     "fileContent":"" 
    } 

); 

    public headers = new Headers({ 'Content-Type': 'application/json' }); 
    public options = new RequestOptions({ headers: headers }); 
    private url = 'http://uat.justransform.com:8080/justransform/transaction/find?sortByColumn=transactionId&sortByOrder=Desc'; 




    randomQuote:Array<any> = []; 
getRandomQuote() { 
    this.http.post(this.url, this.body, this.options) 
    .map((res:Response) => res.json()) 
    .subscribe( 
     data => {this.randomQuote = data}, 
     err => this.logError(err), 
    () => console.log('Random Quote Complete') 

    ); 

} 

logError(err) { 
    console.error('There was an error: ' + err); 
} 
    clicked(event) { 
    alert("Alert"); 

    } 


    constructor(public http: Http) { 

    this.getRandomQuote(); 

    } 
} 

Answer 1

あなたのコードは、クラスのコンテキストでheaders属性を定義し、それがheadersを使用した後、直接それにアクセスしようとします。あなたはそのために得る

public headers = new Headers({ 'Content-Type': 'application/json' }); 
public options = new RequestOptions({ headers: headers }); 

エラーメッセージは、具体的にしようとするのかを説明します：

Cannot find name 'headers'. Did you mean the instance member 'this.headers'?

あなたはクラスのコンテキストでheadersを定義したためです。適切にアクセスするには、this.headersを使用する必要があります。

public options = new RequestOptions({ headers: this.headers }); 
//           ^here 

詳細についてはTypeScript Classesを参照してください。