当用户点击时用新元素展开 li
Expand li with new elements in it when user clicks on it
我有一个列表,每行都有删除按钮。当用户单击删除按钮时,li 应该展开并显示一条确认消息和仅用于该 li 的两个按钮。目前,当我单击任何删除按钮时,都会显示所有 li 的确认消息
我已将我的代码粘贴到下面的 stackblitz 中。
https://stackblitz.com/edit/angular-oxnnhv
提前致谢
显示变量在所有项目之间共享。所以所有的 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);
}
}
见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;
访问列。
修改下面的代码应该可以了。现在,您可以指定要显示的项目,而不是设置显示。
showDeleteConfirmation(e, eachColumn) {
e.stopPropagation();
console.log('showDeleteConfirmation');
this.show = eachColumn;
}
<div fxLayout="column" *ngIf="show === eachColumn">
我有一个列表,每行都有删除按钮。当用户单击删除按钮时,li 应该展开并显示一条确认消息和仅用于该 li 的两个按钮。目前,当我单击任何删除按钮时,都会显示所有 li 的确认消息
我已将我的代码粘贴到下面的 stackblitz 中。 https://stackblitz.com/edit/angular-oxnnhv
提前致谢
显示变量在所有项目之间共享。所以所有的 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);
}
}
见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;
访问列。
修改下面的代码应该可以了。现在,您可以指定要显示的项目,而不是设置显示。
showDeleteConfirmation(e, eachColumn) {
e.stopPropagation();
console.log('showDeleteConfirmation');
this.show = eachColumn;
}
<div fxLayout="column" *ngIf="show === eachColumn">