当我们单击选定的按钮时如何从保存的数据中删除选定的数据

Question

在我的应用程序中，当我们点击它时，我已经保存了数据（我们可以通过输入一些数据来添加多个数据，并通过点击保存按钮来保存多个数据）。

.component.html

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

      <div
        class="clinical-note__category__details"
        *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(habits);customHabitPopovers.hide()">yes </button>
       
        </popover-content></div>
      </div>
    </ng-container>

在上面的代码中，当我们点击删除按钮时，它会显示一些带有按钮是的弹出窗口（在上面的代码中实现），现在我的要求是当我们从弹出窗口中点击是按钮时，它必须删除特别是一个。

.component.ts

 public saveHealthyHabits() {
    let isCategoryExist = false;
    let categoryDetails = {
      category: this.clinicalNoteForm.controls.category.value,
      habitDetails: this.healthyHabits.value,
      showDetails: true,
    };
    if (this.customHabitList.length) {
      categoryDetails.habitDetails = categoryDetails.habitDetails.concat(
        this.customHabitList
      );
      this.customHabitList = [];
    }

    if (this.selectedCategoryDetails) {
      this.selectedCategoryDetails.forEach((selectedCategory) => {
        if (selectedCategory.category === categoryDetails.category) {
          isCategoryExist = true;
          selectedCategory.habitDetails = selectedCategory.habitDetails.concat(
            categoryDetails.habitDetails
          );
        }
      });
    }
    if (!this.selectedCategoryDetails || !isCategoryExist) {
      this.selectedCategoryDetails.push(categoryDetails);
    }

    this.clinicalNoteForm.patchValue({
      category: null,
    });
    this.healthyHabits.clear();
public deletedata(habits){
   if (this.selectedCategoryDetails) {
    this.selectedCategoryDetails.forEach((selectedCategory) => {
  
      if (selectedCategory.category ==categoryDetails.category) {
        isCategoryExist = true;
       
       this.selectedCategoryDetails.splice(habits, 1);
      }
    });
   }
  }

上面我写的代码是为了保存数据（我们可以输入多个数据，保存多个）

像上面一样，当我们从弹出窗口中单击“是”按钮时，我必须删除特定的那个。

谁能帮我解决这个问题

Answer 1

如果您在 html 中迭代，例如：

<... *ngFor="let categoryDetails of selectedCategoryDetails" ...>

你的按钮 deletedata() 在 ngFor 的范围内，你可以：

更改您的迭代以包括项目索引和用于更新视图中数组的 trackBy 函数：

<... *ngFor="let categoryDetails of selectedCategoryDetails; let i = index; trackBy: trackByFn" ...>

在按钮上单击将索引传递给 deletedata() 方法，例如：

deletedata(index)

创建您的 deletedata 方法，例如：

deletedata(index:number){
    this.selectedCategoryDetails.splice(index, 1);
    // other code here, like calling api
    // to update the selectedCategoryDetails source
    // etc.
}

创建 trackByFn 方法，如：

 trackByFn(index,item){
     return index;
 }

编辑：没有索引

如果您想在 ts 文件中遍历 selectedCategoryDetails，而不在 html 中使用带索引的 ngFor，您可以这样设置 deletedata：

deletedata(categoryDetails:any){
    for (let i = this.selectedCategoryDetails.length - 1; i >= 0; i--) {
      if (this.selectedCategoryDetails[i] === categoryDetails.category) {
        this.selectedCategoryDetails.splice(i, 1);
      }
    }
}

它将向后遍历 selectedCategoryDetails，如果在对象数组中找到 categoryDetails，则将其删除。

现在，您只需将 categoryDetails 传递给 deletedata 在您的 html:

(click)="deletedata(categoryDetails);customHabitPopovers.hide()"

当我们单击选定的按钮时如何从保存的数据中删除选定的数据

How to remove the selected data from saved data when we click on button in a selected one

javascript

foreach

for-loop

typescript

angular