The concept of public property remains ambiguous within the Map operator in Typescript

I have implemented the following code snippets:

isValidLogin():Observable<boolean> {
    return this.http.get(this._checkLoginUrl)
       .map(res=>res.json())
        .map((res) => {
            if (res.success) {
                this.loggedIn = true;
            }
            return res;
        });

}

Transpiled JavaScript:

  LoginService.prototype.isValidLogin = function () {
    var _this = this;
    return this.http.get(this._checkLoginUrl)
        .map(function (res) { return res.json(); })
        .map(function (res) {
        if (res.success) {
            _this.loggedIn = true;
        }
        return res;
    });
};

In the code snippet, loggedIn is a public property of the class. However, it displays as undefined, and this here refers to the Map object context, making it unable to assign a value to loggedIn.

I believe that the lambda expression should be able to access the context of the class object. Have I made any mistakes in my implementation?

Answer №1

I believe the lambda expression should have access to the context of the class object. Is there something incorrect in my implementation here?

It seems that the class member also needs an arrow. Rather than using :

isValidLogin():Observable<boolean> {

Try using:

isValidLogin = ():Observable<boolean> => {

For more information, visit:

https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Angular2 wysiwyg component failing to submitThe Angular2

I'm currently in the process of familiarizing myself with angular2 by developing a sleek wysiwyg component. However, I seem to have reached an obstacle at this point. Below is the code I've been working on: The form that I am utilizing for testi ...

Implementing Firebase-triggered Push Notifications

Right now, I am working on an app that is built using IONIC 2 and Firebase. In my app, there is a main collection and I am curious to know if it’s doable to send push notifications to all users whenever a new item is added to the Firebase collection. I ...

Angular error TS2339: The property 'before' is not found on type 'HTMLElement' / 'HTMLTextAreaElement' / etc

Objective: My goal is to reposition a div (containing a mat-select dropdown) ABOVE a mat-card-title when the user is accessing the site from a mobile device. If the user is not on a mobile device, the div should remain in its original position to the right ...

Utilizing the output of one function as an input parameter for another function: A guide

Having this specific shape const shape = { foo: () => 'hi', bar: (arg) => typeof arg === 'string' // argument is expected to be a string because foo returns a string } Is there a way to connect the return type of foo to the ...

What methods can I use to dismantle an Angular component?

I have created a modal as a component called <modal-component>. Within the <modal-component>, there is a close button. I am looking for a way to completely remove the <modal-component> when this close button is clicked. I envision somet ...

Eliminate information from Firestore with Angular

https://i.sstatic.net/MFKHB.png I encountered an issue while attempting to delete data from Firestore. Fetching and adding data is functioning correctly, but when attempting to delete data, it does not get removed and no error is displayed on the console. ...

What is the equivalent of Buffer.from(<string>, 'hex') in Python?

I am currently facing the challenge of translating a Typescript library into Python. The specific library I am working with is bs58 in Typescript and its counterpart base58 in Python. My issue arises when attempting to replicate the following code: const ...

Switching Modes in Angular Application - Going from Demo Mode to App Mode?

Working on an Angular application, I have encountered a unique scenario that requires a solution. Our application, test.com, utilizes several restful APIs developed by us. Our business now wants us to store dummy responses from these APIs in static JSON f ...

How can Typescript limit the global availability of exported items?

Imagine a TypeScript folder structure like this: index.ts login/ --index.ts --util.ts registration/ --index.ts --util.ts Is there a way to limit the exports (namespaces) of the modules to within the folders? For instance, if both util.ts modules e ...

In Electron, methods for detecting and resolving Error TS2304: Unable to locate the name 'unknown on(event: 'ready', listener: (launchInfo: unknown) => void): this are essential for smooth operation

Encountering an issue while running npm build. Electron version: 7.1.2 TypeScript version: ^2.5.1 Target version: ES2017 Here are the details of the error. When I performed the build under the following conditions: Electron version: 6.0.0 TypeScript ver ...

You are not able to use *ngIf nested within *ngFor in Angular 2

I am currently working in Angular2 and trying to bind data from a service. The issue I am facing is that when loading the data, I need to filter it by an ID. Here is what I am trying to achieve: <md-radio-button *ngFor="#item of items_list" ...

Exploring the power of props in Vue3/Nuxt3: A guide to utilizing props directly in the

Could you assist me in resolving this issue : When accessing a value from the props within the root scope of <script setup>, reactivity is lost (vue/no-setup-props-destructure) The technologies I am using include : nuxt: "^3.6.5" typescri ...

Creating a Custom FlatList Content Container with React Native

Is it possible to customize FlatList items with a custom component? I want to create a setup where my FlatList items are encapsulated within a custom component similar to the following: <ScrollView pt={8} px={16} pb={128} > <Card e ...

Unable to modify the date input format in Angular when utilizing the input type date

I am currently working with angular 10 and bootstrap 4. I am trying to update the date format in an input field from (dd/mm/yyyy) to DD/MM/YYYY, but I am facing issues. Below is my angular code: <input type="date" id="controlKey" cl ...

Error: The token 'export' in d3zoom is causing a syntax issue

I'm encountering issues with executing tests in Angular: ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export {default as zoom} from "./zoom.js"; ...

In React, the Textarea component that displays the character count only updates its value after a page reload

Contained within this element is the following component: import React, { useEffect, useState } from 'react'; import { TextareaTestIds } from '../utils/test-ids'; export interface TexareaProps extends React.TextareaHTMLAttributes<H ...

What is the process for listening to custom events in Angular 4 components that have been loaded using routing?

In the app.component.html file <li routerLinkActive="active current"> <a [routerLink]="['/stats']"> Cluster stats </a> </li> When we route to the DisplayAllStatsComponent, how can we ...

Having trouble processing images in multi-file components with Vue and TypeScript

Recently, I reorganized my component setup by implementing a multi-file structure: src/components/ui/navbar/ Navbar.component.ts navbar.html navbar.scss Within the navbar.html file, there was an issue with a base64-encoded image <img /> ...

The presence of HttpInterceptor within a component is causing a ripple effect on all of the App

I am encountering an issue with a library I have that includes a component. This component has an HttpInterceptor that adds a header to each of its requests. The problem arises when I use the component in another project - the HttpInterceptor ends up addi ...

Inconsistency in product returns following promise mapping - Utilizing Ionic, Angular, and Typescript

When I retrieve items from a database for a feed, it is crucial that they remain in the same order as retrieved. However, despite mapping the array from the query, the displayed feed objects end up out of sequence. Here's the snippet of code: let ...