單擊按鈕時如何從確認彈出視窗中洗掉專案

對于下面的角度代碼，我有一些資料迭代，現在我必須洗掉專案，當我們點擊洗掉按鈕時，如果我們點擊是，特定專案必須從中洗掉，它將顯示確認彈出是否洗掉迭代。

.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 新手，誰能幫我解決這個問題

uj5u.com熱心網友回復：

您可以過濾掉需要洗掉的元素：

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

標籤：javascript 有角度的 打字稿 for循环 前锋

上一篇：用于調整視窗大小的ReactHook不會更新

下一篇：基于相同型別欄位的條件型別