如何动态更改 Angular 10 中的 ngModel 值

Question

In Angular 10, I'm dynamically generating three dropdowns and need to dynamically generate their ngModel values (eg, row1, row2, row3).

<table>
     <tr *ngFor="let num of [0, 1, 2]; let i=index">
       <td>
         <h4>Row {{ num + 1 }}</h4>
         <select matNativeControl [(ngModel)]="row[num+1]">
             <option *ngFor="let item of items" [value]="item">{{ item.fruit }}</option>
           </select>
       </td>
     </tr>
   </table>

(ngModel)]="row[num+1]" is where I'm trying to add a 1, 2, 3 as the dropdowns multiply. The header is dynamically changing but ngModel is not and is throwing an error as it is finding row to be undefined. I've tried several different ways and have hit a wall.

Here is code from app.component.ts:

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  row: any;
  row1: any;
  row2: any;
  row3: any;
  items: any;
  num: any;

  constructor() {}

  ngOnInit(): void {
    this.items = [
      { fruit: 'apple', color: 'red' },
      { fruit: 'orange', color: 'orange' },
      { fruit: 'grape', color: 'purple' }
    ];
  }

  // printVal() {
  //   console.log('Test: ', this.row[this.num].fruit);
  // }
}

Here is stackblitz: https://stackblitz.com/edit/angular-ivy-9wr3vh

Answer 1

row[num] isn't equal to row1. It is searching a variable called row,then it's index. since you're row is undefined, it is impossible to attach ngModel to it. try something like this,

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  row = [0,1,2]
  items: any;

  constructor() {}

  ngOnInit(): void {
    this.items = [
      { fruit: 'apple', color: 'red' },
      { fruit: 'orange', color: 'orange' },
      { fruit: 'grape', color: 'purple' }
    ];
  }

  // printVal() {
  //   console.log('Test: ', this.row[this.num].fruit);
  // }
}

And if you're trying to change items, color or fruit -i don't know which one you're trying to change.- try this in your html

<table>
     <tr *ngFor="let item of items; let i=index">
       <td>
         <h4>Row {{ i + 1 }}</h4>
         <select matNativeControl [(ngModel)]="item[i].color">
             <option *ngFor="let item of items" [value]="item">{{ item.fruit }}</option>
           </select>
       </td>
     </tr>
   </table>