Angular 当用户单击li时，使用其中的新元素展开li

我有一个列表，每个li上都有删除按钮。当用户单击“删除”按钮时，该li应展开并显示一条确认消息以及仅针对该li的两个按钮。目前，当我点击任何删除按钮，然后确认消息显示所有李的

我已经将我的代码粘贴到下面的stackblitz中。

---

提前感谢

显示变量在所有项目之间共享。因此，所有LIUI都已启用。 使用索引进行修复，如下所示

<li fxLayout="column" class="field-list-item filters" *ngFor="let eachColumn of fieldViewList;let i = index"
                    (click)="fieldSelect(eachColumn)">
                    <div fxLayout="row">
                    <div class="title-container">
                        <span class="title">{{eachColumn}}</span>
                    </div>
                    <div class="delete-field hide" (click)="showDeleteConfirmation(i)">Del</div>
                    </div>
                    <div fxLayout="column" *ngIf="show === i" id="{{i}}">
                    <span> Please confirm if you want to delete this field view. This operations can not be undone. </span>
                    <div class="confirmation-button-container">
                        <button (click)="cancelConfirmation($event)">Cancel</button>
                        <button (click)="deleteField($event,eachColumn)">Delete</button>
                    </div>
                    </div>
                </li>

看。对每个

项目使用
show
变量，如下所示：

fieldViewList = [
  {
      title: 'field1',
      show: false
  },
  {
      title: 'field2',
      show: false
  },
  {
      title: 'field3',
      show: false
  },
  {
      title: 'field4',
      show: false
  },
  {
      title: 'field5',
      show: false
  }
];

这允许您单独切换每个项目

不要忘记这样修改视图：
*ngIf=“eachColumn.show”
和
{{eachColumn.title}
并使用
column.show=true访问列在组件中。
修改下面的代码，它应该可以工作。现在，您可以指定要显示的项目，而不是设置“显示”

  showDeleteConfirmation(e, eachColumn) {
    e.stopPropagation();
    console.log('showDeleteConfirmation');
    this.show = eachColumn;
  }
 <div fxLayout="column" *ngIf="show === eachColumn">

showDeleteConfirmation（e，每列）{
e、 停止传播（）；
console.log（'showDeleteConfirmation'）；
this.show=每列；
}
使用索引标识唯一的项目
  showDeleteConfirmation(e, eachColumn) {
    e.stopPropagation();
    console.log('showDeleteConfirmation');
    this.show = eachColumn;
  }
 <div fxLayout="column" *ngIf="show === eachColumn">