Encountering an Unexpected Index Error with ngFor in Angular 4/5

I am struggling to create a list of inputs and I can't seem to get ngFor to work properly.

<div *ngFor="let q of questions; let i = index" class="col-3">
  <div class="group">
    <input [(ngModel)]="q" [class.ng-not-empty]="q.length > 0">
    <span class="bar"></span>
    <label>Question {{i}}</label>
  </div>
</div>

Here are my current set definitions:

questions: string[];
constructor() {
  this.questions = ['blah', 'blah', 'blah'];
}

The error message I am receiving is:

ERROR in : Error: Cannot assign to a reference or variable!

I have tried various ways to define the index, such as:

*ngfor="let q of questions | index as i"
*ngfor="let q of questions; index as i"

Answer №1

Avoid using [(ngModel)]="q" as you are attempting to assign a value to a local variable within your HTML (specifically, let q)

Instead, consider this:

[(ngModel)]="questions[i]";

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

"Enable email delivery in the background on a mobile app without relying on a server

I am currently in the process of developing a mobile app using Ionic. One feature I would like to incorporate is sending an email notification to admins whenever a post is reported within the app. However, I am facing challenges with implementing this succ ...

Guide to utilizing the Angular Material 2 documentation without an internet connection

Is there a way to access the Angular Material 2 documentation offline? I would like to have it available without needing an internet connection. What alternatives or solutions are there for this? ...

A declaration file in Typescript does not act as a module

Attempting to create a TypeScript declaration file for a given JavaScript library my_lib.js : function sum(a, b) { return a + b; } function difference(a, b) { return a - b; } module.exports = { sum: sum, difference: difference } my_lib.d.ts ...

Data organized in a cell array within Matlab

I have a cell array called CellA that is 100x1 in size. Each cell of the array contains matrices of different sizes, as shown in the attached png file. My goal is to extract data from these cells by finding the number of unique elements and their frequenc ...

Creating a student information database through an array of structures in the C programming language

The function calculateGrade() is designed to generate a database of up to 50 students utilizing an array of structures. This function requires inputting the student's name, test score, and exam score in order to compute the total score and display it. ...

Discovering the optimal method for modifying the state of an object within Object-Oriented Programming using Typescript

I have implemented Object Oriented Programming in my project and I am exploring ways to effectively change the state of an object while ensuring its integrity. Although I have created a code snippet for this purpose, I am curious if there are more optimize ...

What is the best way to extract the ng-reflect-value and compare it with the expected value in testing?

After reviewing the attachment, I am utilizing the following code snippet "private readonly By _idTxt = By.XPath(".//*[@class='metric-set-details-dropdown']/../button[ng-reflect-value]");" in an attempt to extract the value of the attribute ng-re ...

Exploring the Differences Between ionViewWillEnter and ionViewDidEnter

When considering whether to reinitiate a cached task, the choice between ionDidLoad is clear. However, when we need to perform a task every time a view is entered, deciding between ionViewWillEnter and ionViewDidEnter can be challenging. No specific guid ...

Executing a function for every element within a loop in Angular 11 - the Angular way

I'm currently developing a project using Angular in which users have the ability to upload multiple questions simultaneously. After adding the questions, they are displayed in a separate modal where users can include diagrams or figures for each quest ...

Combining Multiple TypeScript Declaration Files into an NPM Package for Seamless Importing with index.d.ts

I have a unique package structure that includes: myPackage/ |- types/ | |- type1.d.ts | |- type2.d.ts |- src/ | |- someUtilities.ts |- index.ts |- package.json |- tsconfig.json In my package, the index.ts file is handling imports and exports for all th ...

Oops! Looks like there's an issue with the route configuration for ''. Make sure to include one of the following: component, redirectTo, children, or loadChildren in order to validate the

I've been facing an issue while setting up a project with angular routing. The project is only displaying the contents of index.html and not app.component.html. Upon inspection, I noticed that the body tag just has <app-root></app-root> in ...

Do not display large numbers within an HTML card

I have this card here and displaying dynamic data inside it. The number is quite large, so I would like it to appear as 0.600000+. If a user hovers over the number, a tooltip should display the full number. How can I achieve this? Below is the HTML code ...

Master the art of transforming Json data into a structured associative array

I am facing an issue with handling JSON data that was posted from a form and unable to process it or store it in a database. This is what the posted data looks like: Array ( [apd0] => [{"ratio":"1","size":"S","quantity":"83"},{"ratio":"2","size":"M ...

Discover the power of working with asynchronous values in objects using the latest @if syntax in Angular 17

Previously, we were able to chain multiple async operations using *ngIf directives in Angular. This allowed us to avoid repeating the async pipe in the template and instead reuse them as a single subscription. With the introduction of the new @if syntax in ...

Having issues sorting the ranking table numerically in a Javascript/jQuery/JSON/localStorage game

I have successfully created a leaderboard for my game, but I am struggling to automatically sort the scores from high to low. I believe that placing the objects into an array and then sorting them may be the solution, however, I am unsure of how to do th ...

Exploring Java Programming with BufferedReader

import java.io.*; public class Main { public static void main(String args[])throws Exception{ String MidtermLecGrade, MidtermLabGrade; String FinalLecGrade, FinalLabGrade; Float MG, temp; Float FG; Float Average; ...

Utilizing objects from a JSON file within an HTML document

I'm currently in the process of creating a comprehensive to-do list, and I want to establish a JSON file that will link all the items on the list together. Despite my efforts, I find myself uncertain about the exact steps I need to take and the speci ...

Receiving an unexpected value from the input attribute

Currently, I am facing a challenge in retrieving data from another component by using the selector in the HTML file of the parent component. Here is how I implemented it: <app-graphs [module]="module" hidden></app-graphs> In the chi ...

Creating unique data from a multidimensional array in PHP

It's been a decade since I last dabbled in programming, but I've decided to pick it up again for pure enjoyment. I'm encountering some difficulties with this PHP code: Here is the data retrieved from the database: $data[0] = ['id' ...

increase the pointer of the float array

I need to shift the float array ptr 256 units from the beginning, which is equivalent to moving it by (256 * 4 bytes) for floats. However, I am encountering a compile time error. long new_capture_length = 4096; long step_size = 256; float data[new_capture ...