Question

我有一个以空[,,,,]开头的数字数组，并且我希望能够编辑该数组中的任何数字。我有以下HTML代码。

<ol>
  <li *ngFor="let number of numbers; let in = index;">
    <mat-form-field>
      <!-- <input matInput type="number" (change)="keyupEvent($event, i)" placeholder="number" [value]="numbers[i]"> -->
      <input matInput type="number" name="number-{{in}}" [(ngModel)]="numbers[in]" placeholder="points">
    </mat-form-field>
  </li>
</ol>

当我更改数字时，组件会正确记录更改（已通过以下验证）

<div *ngFor="let number of numbers">
  {{number}}
</div>

UI开始看起来正确，并列出以下列表：

1. (placeholder text)
2. (placeholder text)
3. (placeholder text)
4. (placeholder text)
5. (placeholder text)

但是当我在＃1中输入5时，会看到以下内容：

1. 5
2. 5 // Cursor is here.
3. (placeholder text)
4. (placeholder text)
5. (placeholder text)

即使我的印刷品（在div中）仅显示要更新的第一个数字。

编辑：我已经确认它与ngModel绑定有关（删除ngModel时屏幕没有奇怪的行为）

EDIT2：我有一个ts文件的请求，所以在这里：

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

@Component({
  selector: 'app-number-crunching',
  templateUrl: './number-crunching.component.html',
  styleUrls: ['./number-crunching.component.css']
})
export class NumberCrunchingComponent implements OnInit {

  numbers: Array<number>;

  ngOnInit(){
    this.numbers = new Array(5).fill(null);
  }
}

更改数字列表时屏幕上的下一个值将更改

0 个答案: