单击按钮时如何从确认弹出窗口中删除项目

Question

For the below angular code I have some iteration of data,and now I have to delete the items when we clcik on the delete button it will show the confirmation popup to delete or not if we clcik on yes the particular item has to be removed from the iteration.

.cmponent.ts

public saveHealthyHabits() {
    let isCategoryExist = false;
    let categoryDetails = {
      category: this.clinicalNoteForm.controls.category.value,
      habitDetails: this.healthyHabits.value,
      showDetails: true,
    };
    
    if (this.selectedCategoryDetails) {
      this.selectedCategoryDetails.forEach((selectedCategory) => {
        if (selectedCategory.category === categoryDetails.category) {
          isCategoryExist = true;
          selectedCategory.habitDetails = selectedCategory.habitDetails.concat(
            categoryDetails.habitDetails
          );
        }
      });
    }
   //some code
  }
public deletedata(categoryDetail){
    this.selectedCategoryDetails.forEach((selectedCategory) => {
      //have to add the code here 
})
    
  }

.component.html

 <ng-container *ngFor="let categoryDetail of selectedCategoryDetails">
      <div>
        <div>
          <b>{{ categoryDetail.category }}</b>
        </div>
         </div>

      <div *ngIf="categoryDetail.showDetails">
      <ul>
          <li class="habit-list"
            *ngFor="let habits of categoryDetail.habitDetails" >
        
            <div class="target-details">
              <b>{{ clinicalNoteLabels.target }}: </b
              ><span class="habit-list__value">{{ habits.target }}</span>
            </div>
          </li>
        </ul>
        <div class="habit-footer">
       <span class="m-l-10"  
          [popoverOnHover]="false"
          type="button"
          [popover]="customHabitPopovers"><i class="fa fa-trash-o" ></i> Delete</span>
        </div>
        <div class="clinical-note__popoverdelete">

        <popover-content #customHabitPopovers [closeOnClickOutside]="true">
          <h5>Do you want to delete this habit?</h5>
          <button
          class="btn-primary clinical-note__save"  (click)="deletedata(categoryDetail);customHabitPopovers.hide()">yes </button>
       
        </popover-content></div>
      </div>
    </ng-container>

.component.spec.ts

describe("healthy habits", () => {
    beforeEach(() => {
      component.selectedCategoryDetails = [
        {
          category: "Drink More Water",
          habitDetails: [
            { trigger: "wake up", target: "drink a glass of water" },
          ],
          showDetails: false,
        },
        {
          category: "Drink More Water",
          habitDetails: [
            { trigger: "wake up", target: "drink a glass of water" },
          ],
          showDetails: true,
        },
      ];
    });
    it("should remove habitsAnd triggers", () => {
      component.deletedata(1);
      expect(component.selectedCategoryDetails.length).toBe(1);
    });
});

In the above code after adding the items If I want to delete some particular item when we clcik on item it will show the confirmation popup with some text and buttons yes and no,

So when we click on yes button from the popup it has to remove the particular item. I am new to angular can anyone help me on this

Answer 1

You could just filter out the element that needs to be removed:

public deletedata(categoryDetail) {
  this.selectedCategoryDetails = 
    this.selectedCategoryDetails.filter(cd => cd !== categoryDetail);
}

The test that you included passes an index to the delete method, instead of the actual object. You should modify the test to pass the object instead:

it("should remove habitsAnd triggers", () => {
  component.deletedata(component.selectedCategoryDetails[1]);
  expect(component.selectedCategoryDetails.length).toBe(1);
});