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中是否可以使用相同的功能？

Real Scenario代码是：

    @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绑定到组件中的数组，然后使用组件上的方法改变该数组。

请点击此处查看快速示例：https://plnkr.co/edit/bGlsxog3tx13aszBv84u?p=preview

Answer 2

html文件

 <form #newForm="ngForm" novalidate (ngSubmit)="savenew(newForm)">
 <ul>
 <li *ngFor="let item of items; let index = index">
  <div class="form-group">
    <input type="text" id="name{{index}}" class="form-control" 
     name="name{{index}}" ngModel #name{{index}}="ngModel" value=
   {{item.name}}>
    <input type="text" id="age{{index}}" class="form-control" 
   name="age{{index}}" ngModel #age{{index}}="ngModel" value={{item.age}}>
    <button type="Button" (click)="remove(index)" >Remove</button>
  </div>
 </li>
</ul>
<button type="button" (click)="addb()">Add</button>
<button type="submit">Submit</button>
</form>

TS文件

 items: any[] = [
 { name: '', age :'' }
 ];
 addb(){
  this.items.push({name:'',age:''});
 }
 remove(index: number): void {
  this.items.splice(index, 1);
 }

@sunit希望这是你的预期

Angular 2中的.remove（）函数

2 个答案: