Issue with Typescript and rxjs 6: Property is not found on type 'object'

Currently, I am working on a small application using Ionic 3 to query a Firebase database for two sets of data. Initially, I encountered an error during the first build stating "Property does not exist on type '{}'", however, after saving the .ts file again (for example, home.ts to trigger an Ionic rebuild), the error disappeared and the page functioned as expected.

The code snippet I am using is as follows:

ionViewDidLoad() {

  this.db.list('myPath-in-firebase', ref => ref.orderByChild('my-key'))
    .valueChanges()
      .subscribe(result => { 
      let mydata1 = result.map(x => x.my-property-key1);
      let mydata2 = result.map(x => x.my-property-key2);
      console.log(mydata1);
      };
}

Upon the first build after running 'ionic serve', I am encountering a TypeScript error: "Property 'my-property-key1' does not exist on type '{}'. However, as mentioned earlier, saving the project file triggers an Ionic rebuild, resolving the issue. I suspect that I need to declare 'x' and its properties somewhere, but I am unsure of how and where to do so.

For context, the structure of my Firebase database is as follows:

my-firebase-database
    |- my-Path
           |- Push-ID-1
                   |- my-property-key1: value
                   |- my-property-key2: value
           |- Push-ID-2
                   |- my-property-key1: value
                   |- my-property-key2: value
           |- Push-ID-3
                   |- my-property-key1: value
                   |- my-property-key2: value

My goal is to have two arrays, one containing values of 'my-property-key1' and the other with values of 'my-property-key2'. Any assistance you can provide would be greatly appreciated.

Update: Refer to the comments for the workaround I used, changing the syntax from result.map(x => x.my-property-key1) to result.map(x => x[my-property-key1]).

For further details, please visit: https://github.com/Microsoft/TypeScript/issues/12596

Answer №1

Give this a shot:

npm uninstall --save typescript;
npm install --save-dev <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8bfff2fbeef8fbfbf0f9f4f8dcbeb2aaba">[email protected]</a>;
npm install --save-dev <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="06747e6c7546627a666a766a4e3830261e261a">[email protected]</a>
npm install --save-dev <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="48b0bab883d7f9f5f7eafcfcd8aea6bab6bab6">[email protected]</a>



import 'rxjs/Rx';

import { switchMap, map } from 'rxjs/operators';
import { Observable, pipe } from 'rxjs';

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

Unable to locate element in the DOM using XPath

Having trouble retrieving an element from the DOM using XPath <input bsdatepicker="" class="form-control font-size-normal ng-untouched ng-pristine ng-valid" id="endDate" name="endDate" placement="top" type="text"> The value of the element is not p ...

When an unrelated value is changed, the Vue 2 dynamic component experiences a loss of its values during the refresh

I've been grappling with this issue for quite some time now and I'm beginning to suspect it might be a bug. I'm currently utilizing a dynamic vue component to substitute markers in a body of text with input fields. The functionality seems t ...

Failed to hit breakpoint in TypeScript file while working with Visual Studio 2019 and Webpack

We are working on an ASP.NET MVC 5 application where we are incorporating TypeScript for client-side code and using webpack to bundle everything into a single js file. TypeScript has been installed via npm. However, we have encountered an issue where setti ...

How can you effectively update the content of a Parent component in react-native by communicating with its child component?

In one of my child components, I have included a button for interaction. Now, within my Parent component, I have three of these child components arranged side by side. Whenever any of these child components are clicked/touched, I want to trigger changes ...

Navigating the structure of an Angular project: sorting modules by core, features, and

Before we begin, let me clarify that this question is original and has not been asked before. I have thoroughly reviewed the angular guide on this topic. However, I still find myself with a handful of questions. Starting with feature modules - the concept ...

How can the size of the font in a <div> be adjusted based on the number of characters present?

I am attempting to create a basic HTML and CSS layout with two div blocks, each 1000px wide, within a parent container that is 3000px wide. <div class="blocks"> <div class="block-a">text 1</div> <div class="block-b">text 2& ...

Error: Unable to locate module: "./library". The parent module directory is "/"

I keep encountering an issue in my project when attempting to load a module. Whenever I try to import it from the node_modules folder, I receive the following error: Uncaught Error: Module not found: "./MyLibrary". Parent module folder was: "/" However, i ...

The DOM does not contain unscrolled rows in the DataTable's infinite scrolling feature

Every time I create a dataTable with infinite scrolling, I use the following code: $('#table1').dataTable({ 'aaData' : dataArr, 'aoColumns': columnArr, 'bScrollInfinite': true, 'bColumnCollapse& ...

Node.js: Handling Undefined Request Parameters

My get route is set up to receive two parameters "limit" and "page". router.get('/:limit/:page', userController.list); class UserController{ public list(req:Request, res:Response): void{ const limit:number = +req.params.limit || 25; ...

Event queuing in Angular and PhoneGap allows for seamless handling of asynchronous

Here is my code snippet: app.factory('contacts', function ($rootScope, $q, cordovaReady) { return { find: cordovaReady(function (filter) { var deferred = $q.defer(); var options = new ContactFindOptions(); ...

Troubleshooting asynchronous problems with rxjs chaining within ngrx effects

@Effect({ dispatch: false }) public setJwtDataParcoursPage = this.actions$.pipe( ofType(INIT_FORM_SUCCESS_ACTION), map((action: InitFormSuccessAction) => action.payload), withLatestFrom(this.store.select(this._apiHeadersSelector.getJwt) as Observa ...

Do you know of a solution to fix the Stylelint error regarding semicolons when using CSS variables?

React.js Css in JS(Emotion) The components above are part of this setup. Here is the configuration for Stylelint: module.exports = { extends: [ "stylelint-config-standard", "./node_modules/prettier-stylelint/config.js", ], ...

I am attempting to update the background image pattern every time the page refreshes. Despite trying numerous codes, I have not been able to achieve the

Here is my code that I've been struggling with. I am trying to change the image on page refresh, but it's not working as expected. <SCRIPT LANGUAGE="JavaScript"> var theImages = new Array() theImages[0] = 'images/1.png' ...

Using AJAX in Django to detect fields with JavaScript

I am currently working on a model: class Name(models.Model): name = models.CharField(max_length=255) project = models.CharField(max_length=255) story = models.CharField(max_length=500) depends_on = models.CharField(max_length=500, ...

Track the number of clicks on the pop-up registered in the PHPMyAdmin database

There seems to be an issue with the IP not appearing in the other table within the same database. On the page "recette1.php?id=1" <?php $bdd = new PDO('mysql:host=localhost;dbname=recettes', 'root', 'root'); include("C:/ ...

How can I navigate through a webpage using Selenium WebDriver and JavaScript?

Currently, I am utilizing the JavaScript API for selenium-webdriver and my goal is to scroll/move down a page in a gradual manner to facilitate visual inspection. Although I am aware that the code below will direct me immediately to a link at the end of t ...

A guide to organizing elements in Javascript to calculate the Cartesian product in Javascript

I encountered a situation where I have an object structured like this: [ {attributeGroupId:2, attributeId: 11, name: 'Diamond'}, {attributeGroupId:1, attributeId: 9, name: '916'}, {attributeGroupId:1, attributeId: 1, name ...

Encountering a CORS policy issue while attempting to retrieve data from an API

I have been attempting to retrieve data from the DHL API, however, I keep encountering issues due to CORS policy blocking the request. Even though I have configured the CORS policy on my backend server, the error persists. What could be the issue? Here ...

Automatically injecting dependencies in Aurelia using Typescript

Recently, I started working with Typescript and Aurelia framework. Currently, I am facing an issue while trying to implement the @autoinject decorator in a VS2015 ASP.NET MVC 6 project. Below is the code snippet I am using: import {autoinject} from "aure ...

Alter Express routes automatically upon updating the CMS

Currently, I am working on a project that utilizes NextJS with Express for server-side routing. lib/routes/getPages const routes = require('next-routes')(); const getEntries = require('../helpers/getEntries'); module.exports = async ...