Angular 2中的.remove()函数

2023年3月3日 286次阅读

假设,我有一个包含5个项目的列表,我希望用户能够从列表中删除他想要的条目.在这种情况下,如果我使用jQuery,我可以指向特定的删除按钮类,并使用“this”指向其最近的父级,然后使用“.remove()”将其从DOM中删除.例：

$('.delete').click(function(){
  $(this).closest('li').remove();
})  
ul li {
padding:0.5em;
list-style-type:none;
margin-bottom:0.5em;
}

ul li span a {
margin-left:100px
}

ul li span a:hover {
text-decoration:underline;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
      <li>Item 1<span class="delete"><a>Delete</a></span></li>
<li>Item 2<span class="delete"><a>Delete</a></span></li>
<li>Item 3<span class="delete"><a>Delete</a></span></li>
<li>Item 4<span class="delete"><a>Delete</a></span></li>
<li>Item 5<span class="delete"><a>Delete</a></span></li>
    </ul>

我想在Angular 2中是否可以使用相同的功能？

真实场景代码是：

    @Component({
  selector: 'myLevels',
  template: `
      <template #clone>
        <div class="addedLevel">
        <p>Paragraph Two</p>
        <span #element><i class="fa fa-trash deleteLevel" (click)="removeLevel()"></i></span>
        </div>
      </template>
      <div #container></div>

      <button (click)="cloneTemplate()">Clone Template</button>
  `,
})

export class level implements OnInit, AfterViewInit {

  // What to clone
  @ViewChild('clone') template: any;

  // Where to insert the cloned content
  @ViewChild('container', { read: ViewContainerRef }) container: any;

  cloneTemplate() {
    this.container.createEmbeddedView(this.template);
  }

  constructor(private element: ElementRef) { }
  ngOnInit() { }
  ngAfterViewInit() {
    // $(document).on('click', '.deleteLevel', function() {
    //   $(this.closest('.addedLevel')).remove();
    // })
  }

  removeLevel() {
    debugger;
    console.log(this.element);
    this.element.nativeElement.querySelector('.addedLevel').remove();
  }

}

最佳答案 正如其他人所指出的那样,完全没有必要自己访问DOM. Angular会为您解决这个问题.只需使用ngFor绑定到组件中的数组,并使用组件上的方法对该数组进行mutate.

请看这里的快速示例：https://plnkr.co/edit/bGlsxog3tx13aszBv84u?p=preview

点赞