Invalid number of arguments for pure functions

I am currently facing an issue in angular2 (rc-1) where I am passing an array of strings to my function through component binding. However, when the array length exceeds 10, an error occurs:

Unsupported number of argument for pure functions: 11

This error seems a bit strange to me for two reasons:

  • The array is supposed to be a single parameter.
  • Why is there a limit on the number of function parameters? (the only reason that comes to mind is performance optimization to avoid using the arguments keyword.)

Here's how the component selector looks like:

<tb-infinite-scroll
  [tbDataProperty]="[
    'prop1',
    'prop2',
    'prop3',
    'prop4',
    'prop5',
    'prop6',
    'prop7',
    'prop8',
    'prop9',
    'prop10',
    'prop11'
  ]"></tb-infinite-scroll>

In the component itself:

@Component({
  selector: 'tb-infinite-scroll',
  inputs: [
    'dataProp:tbDataProperty',
  ],
  /*...*/
})

export class TbInfiniteScrollComponent {

  public dataProp:any = '';

And within the component template:

<div *ngIf="sharedServices.typeOf(dataProp) === 'object'">
    <div class="tb-infinite-scroll__cell" *ngFor="let prop of dataProp">{{row[prop]}}</div>
</div>

Here's the stack trace of the error:

browser_adapter.js:77 Error: Uncaught (in promise): Unsupported number of argument for pure functions: 11
    at resolvePromise (zone.js:538)
    at PromiseCompleter.reject (zone.js:515)
    at eval (application_ref.js:295)
    at ZoneDelegate.invoke (zone.js:323)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (ng_zone_impl.js:45)
    at ZoneDelegate.invoke (zone.js:322)
    at Zone.run (zone.js:216)
    at zone.js:571
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (ng_zone_impl.js:36)

Any insights on what might be causing this issue or any workarounds would be greatly appreciated.

Thank you in advance.

javascriptangularjstypescriptangular

Answer №1

Here is a possible solution:

<tb-infinite-scroll
  [tbDataProperty]="tbDataProperty"></tb-infinite-scroll>

@Component({
  selector: 'parent-component',
  /*...*/
})

export class ParentComponent {
  tbDataProperty = [
    'prop1',
    'prop2',
    'prop3',
    'prop4',
    'prop5',
    'prop6',
    'prop7',
    'prop8',
    'prop9',
    'prop10',
    'prop11'
  ];

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

Import all templates from one single file in AngularJS

Hi there, I just wanted to share that I've already found a solution to my problem before posting this question. You can check out the example by vojtajina here. It worked really well for me, but I'm still struggling to fully understand how and wh ...

angularjs

Different ways to dynamically change tailwind colors during execution

Utilizing tailwind v3, it's feasible to customize existing colors by modifying the tailwind.config file. https://tailwindcss.com/docs/customizing-colors module.exports = { theme: { extend: { colors: { gray: { ...

javascripttailwind-csstailwind-uitailwind-in-js

Using React hook form to create a Field Array within a Dialog component in Material UI

I have a form with custom fields added via Field Array from react-hook-form, and everything is functioning properly. However, I recently implemented drag and drop functionality for the property items to allow reordering them. Due to the large number of fie ...

javascriptreactjsformsmaterial-uireact-hook-form

Wrapping dynamic page titles with comment tags in NextJS for cleaner code

I am currently working on NextJS version 12. In my project, I have a file named Layout.js which contains the following code: import Head from "next/head"; const Layout = ({children, pageTitle, mainClass}) => { return ( <> ...

javascriptreactjsnext.js

Webpack has issues with loading HTML files

I encountered a 404 not found error while attempting to load the HTML page using webpack. Here are my configurations: Webpack.config.js: const path = require('path'); module.exports= { devServer: { // contentBase static : { ...

javascriptnpmwebpackwebpack-dev-server

Exploring the process of iterating through a JSON post response and displaying its contents within image divs

After receiving a JSON post response, I am looking to iterate over the data and display it in image divs. Can anyone provide guidance on how to achieve this using JavaScript? Thank you. Here is the JavaScript code that handles the JSON post response: cor ...

javascriptjqueryparsingjson

Automatically format text fields to display time in hh:mm format from right to left as you type

Is there a way to automatically format hh:mm as the user types in a text field? The default format is 00:00, and I would like it to fill the minutes part when the first two characters are entered, followed by filling the hour part with the third and four ...

javascriptjquery

Server-Side Rendering (SSR) is failing to generate any HTML output

I recently integrated Angular Universal SSR into my Angular application. Everything is working perfectly fine locally without any errors during the yarn build:ssr or yarn dev:ssr commands. Upon starting the server and inspecting the source, I can see all t ...

node.jsangularexpressnginxuniversal

What is the best way to test chained function calls using sinon?

Here is the code I am currently testing: obj.getTimeSent().getTime(); In this snippet, obj.getTimeSent() returns a Date object, followed by calling the getTime() method on that Date. My attempt to stub this functionality looked like this: const timeStu ...

javascriptunit-testingtypescriptsinon

Pause and be patient while in the function that delivers an observable

I have a function that loads user details and returns an observable. This function is called from multiple places, but I want to prevent redundant calls by waiting until the result is loaded after the first call. Can anyone suggest how this can be accompli ...

angulartypescriptrxjs

Learn how to find and filter elements in arrays that do not include a particular value using React

In my collection of recipes, I have the ability to filter out the ones that include specific ingredients. However, when I attempt to reverse this process by using .some method, it only checks the first item in the array. Here is an example of my data stru ...

javascriptreactjsfilter

Tips for interpreting JSON information and showcasing it with the assistance of Ajax in JQuery?

There's a request made to the system via AJAX that returns JSON as a response, which is then displayed in an HTML table. The HTML code for displaying the data looks like this: <table id="documentDisplay"> <thead> <tr ...

javascriptjqueryajaxjson

I am unsure about how to properly implement the reduce function

I am struggling with implementing the reduce function in my code. I have data output from a map function that consists of two documents. For example, one document contains: key "_id":"AD" "values" { "numtweets" : 1, "hastags" : ...

javascriptjsonmongodbmapreduce

Implementing dynamic URLs using static routing in Express

I'm looking for a way to render a page statically in Express that involves using a dynamic URL. For example, In my forum, users create posts and each post has its unique URL that shows the post when clicked: localhost:8080/posts/postNumber Current ...

javascriptajaxexpressroutes

Clicking on a single checkbox causes the entire input to become deactivated due to the way the system is

I'm encountering a puzzling issue that has me feeling like I know the solution, yet I don't. I set "State" to [checked]. The problem arises when, upon turning it into a map and clicking just one checkbox, the entire selection is clicked. To addre ...

javascriptreactjstypescriptmaterial-uinext.js

An easy guide on utilizing ngSwitch for datatype selection in Angular

While working in angular2, I came across a question regarding the usage of ngSwitch to load <div> tag based on the datatype of a variable. Is it possible to achieve something like this: <div [ng-switch]="value"> <p *ng-switch-when="isObj ...

angulartypescriptinstanceoftypeofng-switch

What are the best ways to enhance performance when making multiple require() calls?

I am in the process of developing a bot for my company's Mattermost server (similar to a Discord bot). Each command for the bot is housed in its own file, making it easier to manage and maintain. When a user wants to execute a command, they must send ...

javascriptnode.jsmattermost

What are the drawbacks of automating the process of generating charts to track time spent on webpages?

!RESOLVED! I am looking to automatically generate charts based on users and their time spent on different pages of a website. I have a file named "log.xml" where I store user information (customers), visited pages, dates, and the time they spent; once I ...

javascriptjqueryxmlajaxjqplot

Update the image within the svg tag

I am attempting to modify a preexisting SVG element within an HTML document. Here is the current code: <svg class="logo" viewBox="0 0 435 67"> <!-- IMAGE DIMENSIONS --> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo- ...

javascriptjqueryhtmlsvg

The controller failed to return a value when utilizing the factory

I am attempting to pass a value from my view to the controller using a function within the ng-click directive. I want to then use this value to send it to my factory, which will retrieve data from a REST API link. However, the value I am sending is not ret ...

javascriptangularjspromiseangular-promiseangularjs-http