angular - Angular 2 中的 .remove() 函数

Question

假设，我有一个包含 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();
  }

}

Answer 1

正如其他人所指出的，完全没有必要自己访问 DOM。 Angular 会为你处理这些。只需使用 ngFor 绑定(bind)到组件中的数组，然后使用组件上的方法改变该数组。

请参阅此处的快速示例:https://plnkr.co/edit/bGlsxog3tx13aszBv84u?p=preview