当用户点击它时，用其中的新元素展开 li答案

【问题标题】：Expand li with new elements in it when user clicks on it当用户点击它时，用其中的新元素展开 li
【发布时间】：2018-10-15 04:49:06
【问题描述】：

我在每个 li 上都有一个带有删除按钮的列表。当用户单击删除按钮时，该 li 应该展开并显示一条确认消息和两个仅针对该 li 的按钮。目前，当我单击任何删除按钮时，会显示所有 li 的确认消息

我已将代码粘贴到 stackblitz 下方。 https://stackblitz.com/edit/angular-oxnnhv

提前致谢

【问题讨论】：

使用索引来识别唯一项

标签： angular list html-lists expandablelistview

【解决方案1】：

请参阅updated stackblitz。像这样为每个item 使用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; 访问列。

【讨论】：

【解决方案2】：

显示变量在所有项目之间共享。所以所有的li ui都被启用了。使用使用索引进行修复，如下所示

<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>

组件应该这样修改

export class AppComponent  {
  name = 'Angular';
  fieldViewList = ['field1','field2','field3','field4','field5'];
   public show: number;

   deleteField(e, column) {
    e.stopPropagation();
    console.log('deleteField() : ', e);
    console.log('column : ', column);

  }

  showDeleteConfirmation(index: number) {
    console.log('showDeleteConfirmation');
    this.show = index;
  }

  cancelConfirmation(index: number) {
    console.log('cancelConfirmation');
    this.show = index;
  }

  fieldSelect(column) {
    console.log('FieldSelect() : ', column);
  }
}

【讨论】：

【解决方案3】：

修改下面的代码，它应该可以工作。现在，您可以指定要显示的项目，而不是设置显示。

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

【讨论】：