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

Question

对于下面的 angular 代码，我有一些数据迭代，现在我必须删除项目，当我们点击删除按钮时，如果我们点击删除按钮，它将显示是否删除的确认弹出窗口是的，必须从迭代中删除特定项目。

.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);
    });
});

在上面的代码中添加项目后如果我想在我们点击项目时删除某些特定项目，它将显示带有一些文本和按钮是和否的确认弹出窗口，

因此，当我们从弹出窗口中单击“是”按钮时，它必须删除特定项目。我是 angular 的新手，谁能帮我解决这个问题

Answer 1

您可以只过滤掉需要删除的元素：

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

您包含的测试将索引而不是实际对象传递给 delete 方法。您应该修改测试以传递对象：

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

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

How to delete the items from confirmation popup when we click on button

javascript

foreach

for-loop

typescript

angular