반복 삭제 * ngFor 템플릿 사용 각도 2/4

Question

템플릿 구동 양식을 사용하여이 행을 어떻게 삭제할 수 있습니까? 배열이 *ngFor에 반복되므로 혼란 스럽습니다. 내가 어떻게 할 수 있니? 여기에 내가 한 일이 있습니다.

HTML

<tr *ngFor="let innerItem of project.material_projects | orderBy: {property: column, direction: direction} | let i = index"> 
    <td>{{innerItem.material.name}}</td> 
    <td>{{innerItem.balance}}</td> 
    <td> 
    <button type="button" class="btn btn-sm btn-danger" (click)="onDelete(i)"> Delete</button> 
    </td> 
</tr> 

TS

onDelete(index: number) { 
     this.projects.material_projects.splice(index, 1) 
} 

Answer 1

문제는 논리적 부분입니다 :

| orderBy: {property: column, direction: direction} | 

이것은 당신의 project.material_projects 배열을 재정렬하고,이 라인 전에 같은 작업을 수행 할 필요가 있도록은 순서가 배열의 인덱스를 사용하고 있습니다 :

this.projects.material_projects.splice(index, 1) 

을 그리고 그것은 이루어집니다.

---

또는

독특한 liek 경우 가

당신은 id를 전달할 수 onDelete(innerItem.id)

그런

onDelete(id: number) { 
    let index = // logic to find index of that id ; 
    this.projects.material_projects.splice(index, 1); 
} 

Answer 2

이 같은 시도 :

<tr *ngFor="let i = index; let innerItem of project.material_projects | orderBy: { property: column, direction: direction }"> 
    <td>{{innerItem.material.name}}</td> 
    <td>{{innerItem.balance}}</td> 
    <td> 
     <button type="button" class="btn btn-sm btn-danger" (click)="onDelete(i)"> Delete</button> 
    </td> 
</tr> 

및 ts onDelete 메소드는 다음과 같습니다.

onDelete(index) { 
    this.project.material_projects.splice(index, 1); 
}