отображение и скрытие ввода в ngfor для редактирования значения с угловым материалом

Question

Я пытаюсь сделать простой список элементов:

, для этого я использую список матов, содержащий диапазон для чтениярежим и вход в режиме редактирования.Я использую атрибут, скрытый от диапазона, как логическое значение, для переключения между двумя режимами.Я хотел бы переключиться в режим чтения, если фокус ввода потерян, поэтому я использовал (размытие):

<mat-list>
  <mat-list-item *ngFor="let item of list">
    <span #itemDisplay >{{item}}</span>
    <mat-form-field *ngIf="itemDisplay.hidden">
      <input matInput [(ngModel)]="updateItem" [formControl]="updateItemFormControl" [hidden]="!itemDisplay.hidden" (blur)="itemDisplay.hidden=false;" minlength="3" maxlength="10" autofocus #edit>
    <mat-error *ngIf="updateItemFormControl.hasError('required')">
      add label to your item
    </mat-error>
    <mat-error *ngIf="updateItemFormControl.hasError('minlength')">
      min 3 caracters
    </mat-error>
    <mat-hint align="end">{{edit.value.length}} / 128</mat-hint>
    </mat-form-field>

  <button mat-icon-button (mousedown)="changeItem(list.indexOf(item)); itemDisplay.hidden = false;" *ngIf="itemDisplay.hidden"><mat-icon>check_circle</mat-icon></button>
  <button mat-icon-button (click)="updateItem='';itemDisplay.hidden = true;" *ngIf="!itemDisplay.hidden"><mat-icon>edit</mat-icon></button>
  <button mat-icon-button (click)="list.splice(list.indexOf(item), 1)" *ngIf="!itemDisplay.hidden"><mat-icon>delete</mat-icon></button>
  </mat-list-item>

  <mat-list>
    <mat-form-field>
    <input matInput [(ngModel)]="newItem" [formControl]="newItemFormControl" placeholder="Add item" minlength="3" maxlength="10" #add>
    <mat-error *ngIf="newItemFormControl.hasError('required')">
      add label to your item
    </mat-error>
    <mat-error *ngIf="newItemFormControl.hasError('minlength')">
      min 3 caracters
    </mat-error>
    <mat-hint align="end">{{add.value.length}} / 128</mat-hint>
    </mat-form-field>
    <button mat-icon-button (click)="list.push(newItem);newItem=''" [hidden]="false" [disabled]="!newItemFormControl.valid">
      <mat-icon>add_circle</mat-icon></button>
  </mat-list>
</mat-list>

, он работает нормально при первом нажатии на кнопку редактирования, но во второй раз, это не берет фокус.И после второго раза я могу иметь два входа одновременно.К счастью, размытие должно переключить itemDisplay.hidden на false и скрыть диапазон.

Я хотел сделать логику без особых вещей на стороне кода.ты понимаешь проблему?

это мой машинописный текст:

@Component({
  selector: 'list-overview-example',
  templateUrl: 'list-overview-example.html',
  styleUrls: ['list-overview-example.css'],
})
export class ListOverviewExample {

  list:Array<string> = ['item 1','item 2','item 3'] ;
  newItemFormControl: FormControl = new FormControl(this.newItem,[
    Validators.required,
    Validators.minLength(4),
    Validators.maxLength(128)
  ]) ;
  updateItemFormControl: FormControl = new FormControl(this.updateItem,[
    Validators.required,
    Validators.minLength(4),
    Validators.maxLength(128)
  ]) ;

  newItem: string ;
  updateItem: string;

  changeItem(i){
    this.list[i] = this.updateItem ;
    this.updateItem = '';
  }

}

вот ссылка на стек: https://stackblitz.com/edit/angular-xoxuzn

Answer 1

В вашем случае Angular повторяет список, если в массиве обнаружено какое-либо изменение. Вы должны использовать trackBy, чтобы сообщить угловому, что именно изменилось, чтобы он обновил действительно измененную позицию. Из-за этой реконструкции всего вида вы теряете фокус.

Внести следующие изменения

HTML

<mat-list-item *ngFor="let item of list; trackBy:trackByIndex">

ц

 trackByIndex(index: number, obj: any): any {
    return index;
  }