Angular 在ngfor中显示和隐藏输入，以便使用角度材质编辑值

我正在尝试做一个简单的项目列表：

为此，我使用了一个mat列表，其中包含一个读取模式的范围和一个编辑模式的输入。我使用span的attribute hidden作为布尔值在两种模式之间切换。如果输入的焦点丢失，我想切换到读取模式，因此我使用（模糊）：

{{item}}
添加标签到您的项目
最小3个字符
{{edit.value.length}}/128
检查圆
编辑
删除
添加标签到您的项目
最小3个字符
{{add.value.length}}/128
加上一个圆圈

我第一次点击编辑按钮时效果很好，但是第二次，它没有聚焦。第二次之后，我可以同时有两个输入。通常，模糊应该将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 = '';
  }

}

@组件({
选择器：“列表概述示例”，
templateUrl:'列表概览示例.html'，
样式URL:['list-overview-example.css']，
})
导出类ListOverview示例{
列表：数组=['item 1'、'item 2'、'item 3']；
newItemFormControl:FormControl=新FormControl（this.newItem[
需要验证器，
验证器。最小长度（4），
Validators.maxLength（128）
]) ;
updateItemFormControl:FormControl=新FormControl（this.updateItem[
需要验证器，
验证器。最小长度（4），
Validators.maxLength（128）
]) ;
newItem：字符串；
updateItem：字符串；
更改项目（i）{
this.list[i]=this.updateItem；
this.updateItem=''；
}
}

---

这是stackblitz链接：

在您的情况下，如果在数组中检测到任何更改，Angular将重新迭代列表。您应该使用

trackBy

来准确地告诉角度传感器发生了什么变化，以便它能够更新真正发生变化的行项目。因为重建了整个视图，所以失去了焦点

进行以下更改

html

---

你能提供一个答案吗？谢谢你的回复，我在stackblitz中改变了这一点，但是你可以看到，输入在你第一次点击编辑按钮时获得了焦点，但是如果你在输入之外点击并再次尝试编辑，第二次就不会获得焦点。

@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 = '';
  }

}

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

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