Редактируемый список строк

Question

Мне нужен редактируемый массив строк: пользователь должен иметь возможность добавлять / удалять / редактировать любое количество строк.

Мое решение работает для массива объектов, но не для массива строк.

Пожалуйста, объясните мне - почему ввод теряет фокус на каждом символе?

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

interface Foo { str: string; } ;

@Component({
  selector: 'my-app',
  template: `
<p> Notes:{{notes | json}} </p>
<p> Objects:{{objects | json}} </p>

<button (click)="addItem()" >Add new</button> 
 input loses
<p>Objects:</p>
<div *ngFor="let obj of this.objects; let i = index;" >

    Works :<input [(ngModel)]="objects[i].str"  [ngModelOptions]="{standalone: true}" >

</div>

<p>Notes:</p>
<div *ngFor="let str of this.notes; let i = index;" >

  It does not work because it loses focus:<input [(ngModel)]="notes[i]"  [ngModelOptions]="{standalone: true}" >

</div>

  `
})
export class AppComponent  {
  private notes: string[]=[];
  private objects: Foo[]=[];

  addItem() {
    this.notes.push('');
    this.objects.push({str: ''});
  }
}

Ссылка Stackblitz: https://angular-tjm8hj.stackblitz.io/

И что нужно исправить, чтобы сделать это работает, как ожидалось? Спасибо