Leverage the properties of a class to serve as choices for a method's input

I am working on a class called Snackbar that consists of various properties and methods. Here is an example:

export class SnackbarComponent {
  optionA: number;
  option2: string;

  method1(){}
}

My goal is to include the properties as keys in the options. I tried using

[I in SnackbarComponent]: SnackbarComponent[I];
, but encountered the following errors:

  • A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.ts(1170)
  • A computed property name must be of type 'string', 'number', 'symbol', or 'any'.ts(2464)
  • Cannot find name 'I'.ts(2304)
  • Type 'any' cannot be used as an index type.ts(2538)
export class SnackbarService {
  show(message: string, options?: {
    randomString: string;
    [I in SnackbarComponent]: SnackbarComponent[I];
  }): Snackbar {
    // Create instance of SnackbarComponent
    // Set the properties on the SnackbarComponent
  }
}

Answer №1

Don't forget to use the keyof keyword

public class NotificationService {
  displayNotification(message: string, settings?: {
    [Prop in keyof NotificationComponent]: NotificationComponent[Prop]
  })

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

Encountering a 'Not Found' error message when sending an Ajax post request

Having trouble with an AJAX call in my JS file in Durundal. var dataJSON ={ID : "jo"}; self.js = $.ajax({ type: "POST", dataType: text, url: "http://localhost:53081/api/File", data: JSON.stringify(dataJSON), error: function (xhr, stat ...

Tips for eliminating excessive line breaks when incorporating a table tag into nl2br

In my dataset, I have content that consists of plain text, codes, and tables interchangeably. To keep the database optimized, I have limited the use of HTML tags by excluding pre tag for table and text, reserving it only for codes (spaces do not need to b ...

What is the process for implementing a Node.js emit event on the server side to notify when new records have been inserted into the database

I am currently working on developing a Node.js socket backend that is required to send out new records to the client. What I mean by this is, picture having a MySQL database and Node.js running - I aim to send out in real-time any newly inserted record fr ...

Using Angular 2, NodeJS, and Mongoose to send data from an Angular 2 frontend to a NodeJS backend REST API. However, encountering an issue where the Node API logs show that the OPTIONS

I am facing an issue with sending data from my Angular2 frontend API to the backend client, which is built using NodeJS and mongoose. When I inspect the data being sent on the Angular2 client through console.log, I can see that the correct values are being ...

PhantomJS is failing to provide any output

Currently, I am utilizing PhantomJS for web scraping purposes. However, I have encountered an issue where the evaluate method is not returning any data. The script seems to run for a few seconds and then unexpectedly exits. I have confirmed that PhantomJS ...

What is the best way to change the value of a boolean array in React?

In my component, I maintain an array of boolean values as a state. When the value is false, I need to change it to true. this.state = { checkedPos: [] } handleChange(index, reaction) { if (!this.state.checkedPos[index]) { this.state.ch ...

Refresh the ngrx state data whenever the RouteGuard is triggered

When it comes to ensuring the protected view of an entity, I utilize a RouteGuard to pre-load the necessary data for the desired view into the ngrx store. However, as the corresponding data from the backend can be subject to change over time, it is crucial ...

Retrieving information from a JSON file and displaying it in an HTML table through an asynchronous

I need to retrieve data from a server and display it in an HTML table. The server contains an array of weather forecast information as shown below. [{"date":"19\/08\/2020","weather":"Sunny","temperatur ...

Creating a freehand drawing feature with mouse movement using bufferGeometry in three.js r144

I have been working with code from a repository called scribble, which uses three.js r87. In trying to update the code to three.js r144, I followed the steps outlined in the Converting THREE.Geometry to THREE.BufferGeometry tutorial. While one function upd ...

Tips on incorporating multiple lines of placeholder text into a textarea field:

Is it possible to add multi-line placeholder text in a textarea? I found this solution, but unfortunately it does not work on Mozilla and Safari. It seems Chrome is the only browser where this method works: $('#nameTxtBox').attr("placeholder", ...

The functionality of the browser's back button is impaired when the window.location.href is modified

My application used to be written in jQuery and was not SPA. I have recently converted some of the pages to AngularJS, making them SPA. Now, I am faced with the challenge of ensuring proper communication between these two types of apps. When transitioning ...

Transferring HTML elements between pages

I'm currently working on a project with 4 tabbed views, each housed in separate HTML pages. Each view contains several SVG charts created using d3.js. Now, the client wants to be able to easily cut, paste, or move charts from one tabbed view to anothe ...

Stagnant User Interface

My current project involves fetching data from a database in c# and passing it to Javascript using Ajax. I store this data in arrays and query the database every 3 seconds. The data is utilized to update a diagram, such as changing the color of the track. ...

My jQuery form is not functioning properly upon initialization

Let's take a look at this sample 'template' code: $(document).on("<EVENT>", "form", function() { $(this).find(".input input").each(function() { var required = $(this).attr("required"); var checkField = $(this).clos ...

Secret button that remains unresponsive upon initial click after materializing

I am facing a problem with my two buttons in the HTML code. One button is supposed to plot data, while the other is meant to download data. The issue arises when the plot button has data and the Excel download button should become visible. Although this fu ...

Using input masking to restrict user input to only numbers and English alphabet characters

My input field is masked as "999999999" and functions correctly with an English keyboard. However, I am able to enter Japanese/Chinese characters into it, which breaks the masking. Is there a way to limit input to English keyboard numerics only? <inpu ...

Fulfill the promise once all map requests have been completed

Currently, my focus is on developing a bookmark page that retrieves bookmark results with the respective restaurant IDs. Once the response is mapped, I populate an array with objects. My objective is to ultimately resolve the entire array in order to mani ...

Joining the Parent Route String with a Variable using Angular Routerlink

How can I incorporate string interpolation or concatenation into the router link below in order to navigate to the parent route and include a variable link? <a routerLink="../account-information/{{item.productId}}"> ...

Angular Firebase Authentication: Simplifying User Authentication in Angular Apps

Tools I'm Utilizing Angular 5 AngularFire5 Firebase & Firestore Objective I am working on developing a straightforward authentication/login and registration system. While I have already created one, I am facing some challenges and seeking the ...

The Angular observation loop

I am looking to develop a unique color picker that integrates RGB sliders with the farbtastic color picker. Here's the current setup: app.controller('PickAColorController', function ($scope) { $('#colorpicker').farbtastic(function ...