Typescript using a Service Method inside an import

Question

I am using a daterange plugin called Lightpick and if the user picks a start date and end date. thats when I'll be calling a method on my service.ts

here is my code:

Service.ts

const httpOptions = {
   headers: new HttpHeaders({ 'Content-Type': 'application/json; charset=utf-8' })
}

public getAttedanceRecord(data): Observable<any> {
   return this.http.post(url, data, httpOptions);
}

component.ts

import { JsonFileService } from '../json-file.service';
import * as moment from 'moment-timezone';
import 'moment-duration-format';
import Lightpick from 'lightpick';

export class TimeRecordsComponent implements OnInit {

    constructor(public JsonFileService: JsonFileService) {}

    ngOnInit() {
         var picker = new Lightpick({
                field: document.getElementById('datepicker'),
                singleDate: false,
                footer: true,
                selectForward: true,
                onSelect: function(start, end){
                  let startDate = start.format();
                  let endDate = end.format();

                  console.log(startDate + " " + endDate);

                  this.JsonFileService.getAttedanceRecord({
                    EmployeeId: "00000000-0000-0000-0000-000000000001",
                    DateFrom: startDate,
                    DateTo: endDate,
                    TimeZone: "China Standard Time",
                    CountryCode: "PHL",
                    TenantId: "00000000-0000-0000-0000-000000000001",
                    CompanyId: "00000000-0000-0000-0000-000000000001"
                  }).subscribe(data => {
                    console.log(data);
                  });

                }
              });
    }

}

When I set a start and end date it always throws this error.

I am aware that i need to call the method with a different approach so that i can use it. But I don't know how.

Please help me on my development.

Non relevant, as you are using Angular, it is advised to not use DOM directly. Use ViewChild instead. — Plochie
– Plochie, Commented May 2, 2019 at 6:45

Plochie · Accepted Answer · 2019-05-02 04:38:34Z

2

You are using function() which itself is another object. Due to this the service instance is not accessible from function. instead use fat arrow => which allows to access outside members.

 ngOnInit() {
     var picker = new Lightpick({
            .
            .
            .
            onSelect: (start, end) => {
              let startDate = start.format();
              let endDate = end.format();
            .
            .
            .
}

answered May 2, 2019 at 4:38

Plochie

4,1271 gold badge21 silver badges34 bronze badges

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

Comments

subsari · Accepted Answer · 2019-05-02 04:39:31Z

The this keyword is being used incorrectly. The problem line is this.JsonFileService.getAttedanceRecord.

Try the following ngOnInit instead.

  ngOnInit() {
     let parent = this;
     var picker = new Lightpick({
            field: document.getElementById('datepicker'),
            singleDate: false,
            footer: true,
            selectForward: true,
            onSelect: function(start, end){
              let startDate = start.format();
              let endDate = end.format();

              console.log(startDate + " " + endDate);

              parent.JsonFileService.getAttedanceRecord({
                EmployeeId: "00000000-0000-0000-0000-000000000001",
                DateFrom: startDate,
                DateTo: endDate,
                TimeZone: "China Standard Time",
                CountryCode: "PHL",
                TenantId: "00000000-0000-0000-0000-000000000001",
                CompanyId: "00000000-0000-0000-0000-000000000001"
              }).subscribe(data => {
                console.log(data);
              });

            }
          });
}

Collectives™ on Stack Overflow

Typescript using a Service Method inside an import

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related