поле ввода нужно щелкнуть несколько раз, чтобы добавить цифры

Question

вот моя проблема, я использовал функцию ngModelChange для запуска и события.когда я даю количество групп, это дает количество полей ввода ниже этого.но эти новые поля ввода допускают только одно целое число.если я хочу ввести другой номер, я должен снова и снова нажимать на поле ввода.в качестве примера, если я хочу ввести 100. Я должен нажать на одно и то же поле ввода 3 раза.

здесь часть html

    <div class="row">
        <div class="col-md-12">
            <label>Number of Groups </label>
            <input type="number" name="numberofGroups" #numberofGroups="ngModel" [(ngModel)]="StudentCountservice.formData.numberofGroups" (ngModelChange)="onValueChange($event)"class="form-control" required>
        </div>
    </div>
    <div class="row" *ngFor="let grp of groups;let i=index " [attr.data-index]="i" >
        <div class="col-md-12">
            <label>Sizes of Group {{i+1}} </label>
            <input type="number" name="sizeofGroups" #sizeofGroups="ngModel" [(ngModel)]="groups[i]" class="form-control"ng-model-option="{debounce:750}"  required >
        </div>
    </div> 

здесь часть кода файла ts

    onValueChange(newvalue){
    this.groups=[];
    for(var i=0;i<newvalue;i++){
      this.groups[i]=''; 
      }
    }

вот пример стекаблика

https://stackblitz.com/edit/angular-qfadvh

Answer 1

Я нашел этот ответ (https://github.com/angular/angular/issues/20589). Я бросил следующий код в ваш стек, и он сработал. Попробуйте и дайте мне знать, если вы не можете заставить его работать.

Вот мой форк стека: https://stackblitz.com/edit/angular-sa8ww6

app.component.ts

// imports and metadata
export class AppComponent  {
  name = 'Angular';
  groups:any =[];

  onValueChange(newvalue){
    this.groups=[];
    for(var i=0;i<newvalue;i++){
      this.groups[i]=''; 
    }
  }

  // Add this function
  trackArray(index, item) {
    return index;
  }

}

app.component.html

Добавлено trackBy: trackArray в ваш ngFor цикл

<div class="row">
  <div class="col-md-12">
    <label>Number of Groups </label>
    <input type="number" name="numberofGroups" #numberofGroups="ngModel" [(ngModel)]="test" (ngModelChange)="onValueChange($event)"class="form-control" required>
  </div>
</div>

<!-- add the trackBy: trackArray to this ngFor -->
<div class="row" *ngFor="let grp of groups;let i=index; trackBy: trackArray " [attr.data-index]="i" >
  <div class="col-md-12">
    <label>Sizes of Group {{i+1}} </label>
    <input type="number" name="sizeofGroups" #sizeofGroups="ngModel" [(ngModel)]="groups[i]" class="form-control"ngModelOptions="{updateOn: 'blur'}"  required >
  </div>
</div>