Tips for utilizing ngModel within *ngFor alongside the index?

Question

Tips for utilizing ngModel within *ngFor alongside the index?

Currently, I am dynamically generating mat-inputs using *ngFor. My goal is to store each value of [(ngModel)] in a separate array (not the one used in *ngFor) based on the index of the *ngFor elements. Here's my implementation:

<div  *ngFor="let item of items; let id = index;">

<mat-form-field>
  <mat-select [(ngModel)]="differentArray[id].first" (ngModelChange)="onSelection()">
    <mat-option *ngFor="let number of arrayOfNumbers" [value]="number">{{number}}</mat-option>
  </mat-select>
</mat-form-field> 

<mat-form-field>
  <mat-select [(ngModel)]="differentArray[id].second" (ngModelChange)="onSelection()">
    <mat-option *ngFor="let number of arrayOfNumbers" [value]="number">{{number}}</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
<mat-select [(ngModel)]="differentArray[id].third" (ngModelChange)="onSelection()">
<mat-option *ngFor="let number of arrayOfNumbers"[value]="number"> {{number}} </mat-option>
</mat-select>
</mat-form-field>

</div>

However, I've noticed that all the values for different *ngFor loops end up being the same. Why is this happening and what can be done to properly differentiate them based on element id?

angular typescript forms ngfor

Answer 1

Answer №1

According to the property bindings and [(ngModel)] directives you've defined, the structure of differentArray should be as follows:

differentArray = [
  { first: 0, second: 0, third: 0 },
  { first: 0, second: 0, third: 0 },
  { first: 0, second: 0, third: 0 }
]

For a working example, refer to this Stackblitz link.

Update

Instead of pushing it in the parent component, you can bind the @Input() decorator to a setter and directly initialize the differentArray in the child component. Whether you handle it in the parent or child, remember that objects will be pushed by reference. Therefore, any changes made to one object will affect others. To avoid this, use JSON.parse(JSON.stringify(obj)) to create deep clones. Here's an example:

parent.component.ts

export class ParentComponent {
  items = ['item1', 'item2', 'item3'];
  arrayOfNumbers = [1, 2, 3, 4, 5];
  differentArray = { first: 0, second: 0, third: 0 };

  constructor() {}
}

parent.component.html

<app-child [items]="items" [arrayOfNumbers]="arrayOfNumbers" [differentArray]="differentArray"></app-child>

child.component.ts

export class ChildComponent {
  _differentArray: Array<any> = [];

  @Input() items: Array<any> = [];
  @Input() arrayOfNumbers: Array<any> = [];
  
  @Input() set differentArray(obj: any) {
    this.items.forEach(item => 
      // Deep cloning using `JSON.parse(JSON.stringify(obj)` here
      this._differentArray.push(JSON.parse(JSON.stringify(obj)))
    );
  }

  constructor() {}

  onSelection() {
    console.log('selected: ', this._differentArray);
  }
}

child.component.html

<div *ngFor="let item of items; let id=index;">
  <mat-form-field >
    <mat-select  [(ngModel)]="_differentArray[id].first"  (ngModelChange)="onSelection(id)">
      <mat-option *ngFor="let number of arrayOfNumbers" [value]="number">{{number}}</mat-option>
    </mat-select>
  </mat-form-field> 

  <mat-form-field>
    <mat-select  [(ngModel)]="_differentArray[id].second"  (ngModelChange)="onSelection(id)">
      <mat-option *ngFor="let number of arrayOfNumbers" [value]="number" >{{number}}</mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field >
    <mat-select  [(ngModel)]="_differentArray[id].third"  (ngModelChange)="onSelection(id)">
      <mat-option *ngFor="let number of arrayOfNumbers" [value]="number">{{number}}</mat-option>
    </mat-select>
  </mat-form-field>
</div>

For a demonstration, visit this Stackblitz link.

Answer 2

According to the property bindings and [(ngModel)] directives you've defined, the structure of differentArray should be as follows:

differentArray = [
  { first: 0, second: 0, third: 0 },
  { first: 0, second: 0, third: 0 },
  { first: 0, second: 0, third: 0 }
]

For a working example, refer to this Stackblitz link.

Update

Instead of pushing it in the parent component, you can bind the @Input() decorator to a setter and directly initialize the differentArray in the child component. Whether you handle it in the parent or child, remember that objects will be pushed by reference. Therefore, any changes made to one object will affect others. To avoid this, use JSON.parse(JSON.stringify(obj)) to create deep clones. Here's an example:

parent.component.ts

export class ParentComponent {
  items = ['item1', 'item2', 'item3'];
  arrayOfNumbers = [1, 2, 3, 4, 5];
  differentArray = { first: 0, second: 0, third: 0 };

  constructor() {}
}

parent.component.html

<app-child [items]="items" [arrayOfNumbers]="arrayOfNumbers" [differentArray]="differentArray"></app-child>

child.component.ts

export class ChildComponent {
  _differentArray: Array<any> = [];

  @Input() items: Array<any> = [];
  @Input() arrayOfNumbers: Array<any> = [];
  
  @Input() set differentArray(obj: any) {
    this.items.forEach(item => 
      // Deep cloning using `JSON.parse(JSON.stringify(obj)` here
      this._differentArray.push(JSON.parse(JSON.stringify(obj)))
    );
  }

  constructor() {}

  onSelection() {
    console.log('selected: ', this._differentArray);
  }
}

child.component.html

<div *ngFor="let item of items; let id=index;">
  <mat-form-field >
    <mat-select  [(ngModel)]="_differentArray[id].first"  (ngModelChange)="onSelection(id)">
      <mat-option *ngFor="let number of arrayOfNumbers" [value]="number">{{number}}</mat-option>
    </mat-select>
  </mat-form-field> 

  <mat-form-field>
    <mat-select  [(ngModel)]="_differentArray[id].second"  (ngModelChange)="onSelection(id)">
      <mat-option *ngFor="let number of arrayOfNumbers" [value]="number" >{{number}}</mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field >
    <mat-select  [(ngModel)]="_differentArray[id].third"  (ngModelChange)="onSelection(id)">
      <mat-option *ngFor="let number of arrayOfNumbers" [value]="number">{{number}}</mat-option>
    </mat-select>
  </mat-form-field>
</div>

For a demonstration, visit this Stackblitz link.

Tips for utilizing ngModel within *ngFor alongside the index?

Answer №1

Update

Similar questions

Is there a way to incorporate the "Handoff to Human" feature in a Microsoft Teams bot app by utilizing the Teams Toolkit? Can this functionality be implemented using TypeScript?

Unable to resolve TypeScript error: Potential 'undefined' object

"Discovering the root cause of Angular memory leaks and resolving them effectively is crucial for

The functionality of the Protractor right click feature is smooth, however, there seems to be an issue with selecting

Is there a way to use openapi-generator with typescript-angular to generate just a module within an existing Angular project instead of creating a separate package?

The error was thrown by the internal module loader in Node.js at line 1029

My custom styles no longer seem to be applying after upgrading Angular Material from version 14 to 15. What could be causing this issue

I'm trying to determine in Stencil JS if a button has been clicked in a separate component within a different class. Can anyone assist

The Firebase Cloud Function is failing to trigger on the onCreate event within the Firebase Realtime Database

Waiting for a function to complete its processing loop in Angular 7

Exploring properties of nested elements in React

Is there a way to establish a condition for an onSubmit event?

Steps for implementing a conditional rendering in your codeHere is a

Tips for utilizing a particular field in a JSON object as the data origin while employing ng2-completer

Guide to implementing basic authentication within an HTTP request in Angular 4

Using Typescript to pass an interface as an argument to a function that requires a JSON type

Why isn't the constraint satisfied by this recursive map type in Typescript?

Finding a solution to the dilemma of which comes first, the chicken or the egg, when it comes to using `tsc

When clicking the button, the service function is not properly updating the view

Is Typescript generating error TS2411 within its own Typescript module?