在Angular中,要显示列表中的多个按钮,我们可以使用ngFor来遍历列表数据,并使用ngIf来决定是否显示每个按钮。
以下是一个简单的示例代码:
HTML模板:
{{item.name}}
TypeScript组件:
export class ListComponent implements OnInit { items = [ {name: 'Item 1', canDelete: true, canEdit: true}, {name: 'Item 2', canDelete: false, canEdit: true}, {name: 'Item 3', canDelete: true, canEdit: false}, {name: 'Item 4', canDelete: true, canEdit: true}, ];
deleteItem(item) { // delete the item from the list }
editItem(item) { // edit the item }
constructor() { }
ngOnInit(): void { }
}
在这个示例中,我们遍历了items数组,并使用*ngIf指令显示了两个按钮,如果项目可以删除,就会出现删除按钮,如果可以编辑,就会出现编辑按钮。
同时,在组件类中,我们定义了deleteItem()和editItem()方法,用于处理相应按钮的点击事件。
这个方法可以很容易地扩展到包含更多按钮的情况,并且很容易理解和维护。