각도 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>

내가 각도 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을 사용하여 구성 요소의 배열에 바인딩하고 해당 구성 요소의 메서드를 사용하여 해당 배열을 변형하면됩니다.

빠른 예를 들어 여기 참조 : 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); 
} 

가 유 예 할 수