Cannot find name 'headers'. in angular 2 - angularjs

Question

enter image description here
I am working on angular 2.this is my ts file I called getRandomQuote() method in constructor.
But when i run the project i get below error:-
Cannot find name 'headers'. Did you mean the instance member '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

Your code defines the headers attribute in the class context and tries to access it directly after that using headers.
public headers = new Headers({ 'Content-Type': 'application/json' });
public options = new RequestOptions({ headers: headers });
The error message you get for that specifically tells you what to try:
Cannot find name 'headers'. Did you mean the instance member 'this.headers'?
This is because you defined headers in the class context. To properly access it, you have to use this.headers:
public options = new RequestOptions({ headers: this.headers });
// ^ here
See TypeScript Classes for more information.