Cannot find name 'headers'. in angular 2

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":"[email protected]",
    "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();

  }
}

Please post the code as a text in your question instead of an image. — SurvivalMachine
– SurvivalMachine, Commented Jul 12, 2016 at 12:21
yes,I also try to use this , but if i use this it throw below error :- Unexpected directive value '[object Object]' on the View of component 'BasicTables' — Swagat
– Swagat, Commented Jul 12, 2016 at 12:34
I assume you changed it in the wrong place. Please add the complete line where you changed headers to this.headers. — str
– str, Commented Jul 12, 2016 at 12:36

str · Accepted Answer · 2016-07-12 12:45:20Z

3

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.

answered Jul 12, 2016 at 12:45

str

45.5k18 gold badges117 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Swagat Over a year ago

yes,I also try to use this , but if i use this it throw below error :- Unexpected directive value '[object Object]' on the View of component

str Over a year ago

Which line does it refer to?

Swagat Over a year ago

i solve that problem but after solving this on console I am getting this error :-Directive annotation found on BasicTables

Swagat Over a year ago

Directive annotation found on BasicTables error get solved i just change import statement from angular2/http to @angular/http

Collectives™ on Stack Overflow

Cannot find name 'headers'. in angular 2

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related