您可以使用Angular的事件绑定来实现将已移除的li
元素添加到另一个ul
元素的功能。下面是一个示例代码:
HTML模板:
- {{ item }}
- {{ item }}
组件类:
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
items = ['Item 1', 'Item 2', 'Item 3'];
removedItems = [];
@ViewChild('sourceList') sourceList: ElementRef;
@ViewChild('targetList') targetList: ElementRef;
removeItem(item: string) {
const index = this.items.indexOf(item);
if (index !== -1) {
this.removedItems.push(item);
this.items.splice(index, 1);
// 将已移除的li元素添加到另一个ul元素
const li = this.sourceList.nativeElement.querySelector(`li:nth-child(${index + 1})`);
this.targetList.nativeElement.appendChild(li);
}
}
}
在上面的代码中,我们使用ViewChild
装饰器获取了源ul
元素和目标ul
元素的引用。在removeItem
方法中,我们通过计算要移除的li
元素的索引,将其添加到removedItems
数组中,并从items
数组中移除。然后,我们使用querySelector
方法找到要移动的li
元素,并将其添加到目标ul
元素中。
请注意,我们使用了模板引用变量(#sourceList
和#targetList
)来引用ul
元素,以便在组件类中使用ViewChild
装饰器获取它们的引用。
希望以上解决方法能够帮助到您!