Create a dropdown selection menu that is populated with options determined by the input

I have a unique situation where I need to create select options based on an integer stored in a variable inside the component.ts file.

For example, let's say I have a variable called total = 10;

this.totalArray = Array(this.total).fill().map((x, i) => i); 

This is what my component.html looks like:

@Component({
  template: `
    <ul>
      <li *ngFor="let number of totalArray">{{ number }}</li>
    </ul>
  `
})
export class SampleComponent {
  (...)
}

Unfortunately, when I try to run this code, I encounter an error message that says

Supplied parameters do not match any signature of call target

Answer №1

The syntax for *ngFor is actually let number of totalArray. Using #number of totalArray is incorrect and has been invalid for quite some time now:

<ul>
  <li *ngFor="let number of totalArray">{{number}}</li>
</ul>

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

When trying to access a specific property of an object in Typescript using a key that is defined as a subset of

UPDATE: Take a look at the revised solution below, inspired by @GarlefWegart's input. I've been exploring the creation of generic typings for dynamic GraphQL query outcomes (mostly for fun, as I suspect similar solutions already exist). I' ...

Setting up Angular 6 on Azure Platform

I am currently facing challenges while trying to deploy a sample application on the azure portal. To start off, I decided to run some tests by creating an Angular app using 'ng new poc-pwa-angular-v2', and then pushed it to a Bitbucket repositor ...

Tips for utilizing a bootstrap navbar and dropdown in conjunction with angular 7

Attempting to click on the Dropdown link in the menu, but nothing happens. <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-a ...

I encountered an issue where TypeScript's generics function was unable to locate a property within an interface

I am attempting to define a function in typescript using generics, but I encountered the following error: "Property 'id' does not exist on type 'CustomerInterface'" This occurs at: customer.id === +id getCustomer<Custo ...

Accessing file uploads in Angular 2

<div class="fileUpload btn btn-primary"> <span>Select File</span> <input id="uploadBtn" type="file" class="upload" value="No File Chosen" #uploadBtn/> </div> <input id="uploadFile" placeholder="No File Selected" disable ...

Uploading files in Angular 5 with additional properties of other objects

I am facing a challenge with uploading a file as part of a property to an object within a form. Most documentations I have come across only focus on services that handle standalone files. In my case, I have a form with various text inputs and date pickers, ...

What are the best methods for querying and updating a self-relation in Prisma?

I recently obtained some self-relation tables directly from a specific Prisma example. model User { id Int @id @default(autoincrement()) name String? followedBy Follows[] @relation("follower") following Follows[] @rel ...

Combining Observations through Conditionals

I am trying to retrieve a file through http that contains information about other files which are needed in the main file. These could be xsd files with imports, or any other type of file. You can check out the code here: https://stackblitz.com/edit/angul ...

fesm2020/ngx-translate-multi-http-loader.mjs:2:0-41 - Whoops! Looks like the module couldn't be located

After updating my ngx-translate-multi-http-loader from version 8.0.2 to 9.3.1, I encountered a module not found error. The error message is as follows: ./node_modules/ngx-translate-multi-http-loader/fesm2020/ngx-translate-multi-http-loader.mjs:2:0-41 - Err ...

What is the correct way to utilize Global Variables in programming?

Having trouble incrementing the current page in my pagination script to call the next page via AJAX... In my TypeScript file, I declare a global variable like this; declare var getCurrentPage: number; Later in the same file, I set the value for getCurren ...

Comparing Angular2 Material and Bootstrap: Which one is the better

Forgive me if this sounds like a basic question, but I could really use some guidance. I'm in the process of developing a new application and I can't decide between using angular2 material or bootstrap. ...

The API response could not be shown at this time

My API is sending a JSON response. I'm currently attempting to display it in one of my components to better understand how the data is being transferred and displayed for future development. Despite my component functioning correctly with other conte ...

Strategies for integrating this into an HTML template

I am currently learning Ionic 3 and I am looking to implement the select option functionality using HTML. I have already set up an ion-select component using a .ts file, but now I want to do it using HTML. The select option I have in mind is for dates, sp ...

Receiving a form submission via POST method from an external source without redirection

Situation: A user visits site A and submits a form with a hidden input field containing base64 encoded data. The action leads to site B, which is an Angular 2 application. The structure of the form is as follows: <form id="partner" method="POST" actio ...

Issue encountered: The .scss loader did not yield a string following the upgrade to cli version 7.3.6

After using ng update to upgrade my project, I encountered the following error when running ng build --prod: ERROR in The loader "...\ClientApp\src\app\nav-menu\nav-menu.component.scss" didn't return a string. Here is a li ...

What sets apart a private static function from a public static function in TypeScript?

Exploring the nuances of angular2 services: what distinguishes a private static function from a public static function in typescript? public static getUserStockList(): Stock[] { /* TODO: implement http call */ return WATCHLIST; } vs. priv ...

The Gulp task is stuck in an endless cycle

I've set up a gulp task to copy all HTML files from a source folder to a destination folder. HTML Gulp Task var gulp = require('gulp'); module.exports = function() { return gulp.src('./client2/angularts/**/*.html') .pipe( ...

Create a visual representation after inserting

I have created an input feature that allows me to paste images by using CTRL-V. The process involves copying an image from the browser and pasting it into the input field using CTRL-V. The result is an image in base64 format. Is there a way to manipulate ...

NestJS API experiencing issues connecting to MongoDB due to empty index keys

My goal is to create an API with NestJS using TypeORM. Initially, I had set up the API to work with Postgres, but now I need to migrate it to MongoDB. After making the necessary changes, the connection is established successfully. However, I encounter an ...

Integrate Angular 2 into the current layout of Express framework

After generating an express structure with express-generator, I ended up with the standard setup: bin bld node_modules public routes views app.js package.json Now, I want to enhance the views and routes directories by organizing them as follows: v ...