Question

在department.component.html视图中，我每行输入一个复选框，以便用户可以选择要删除的部门。

<tr *ngFor="let department of departments ;trackBy: trackId">
       <td>
           <input type="checkbox"
                       (change)="getSelectedDepartmentID(department)"
                       [checked]="department.checked"
                       id="checkbox_{{department.id}}"
           />
       </td>
</tr>

<!-- this is the delete button -->
    <div class="row">
        <div class="col-sm-4">
        <button type="button"
                (click)="deleteSelectedDepartments()"
                replaceUrl="true"
                class="btn btn-danger btn-sm">
            <span class="hidden-md-down" jhiTranslate="entity.action.delete">Delete Department</span>
        </button>
        </div>
    </div>

在department.component.ts视图

中

getSelectedDepartmentID函数旨在检索用户选择删除的部门ID。

deleteSelectedDepartment旨在调用弹出组件以获取用户的确认。

 getSelectedDepartmentID(department: any) {

  var department_id: number;
  department_id = department.id;


  if (this.selectedDepartment == null || !this.selectedDepartment.hasOwnProperty(department_id)) {
   this.selectedDepartment[department_id] = true;
  } else if (this.selectedDepartment.hasOwnProperty(department_id)) {
   if (this.selectedDepartment[department_id]) {
    this.selectedDepartment[department_id] = false;
   } else {
    this.selectedDepartment[department_id] = true;
   }
  } //if else

 }

 deleteSelectedDepartments() {

  for (var key in this.selectedDepartment) {
   var value = this.selectedDepartment[key];
   if (value) {

    this.router.navigate(['department-checkbox-delete'], {
     queryParams: this.selectedDepartment
    });

   }
  }

 }

问题出在＆＃34; this.router.navigate＆＃34;一部分。由于selectedDepartment由一个键值对组成，我不知道如何将它添加到router.navigate方法，或者更确切地说是route.ts文件。

我不是非常精通angularjs，刚刚开始。

Answer 1

有一种更简单的方法可以确认删除。

您可以使用observable对您的确认进行订阅。

    confirmationObservable: Observable<object>;

    private confirmationObserver: Observer<object>;


    constructor() {

        this.confirmationObservable = new Observable<any>((observer) => {
           this.confirmationObserver = observer;
        })

    }

  deleteSelectedDepartments() {

    for (const key in this.selectedDepartment) {
        const value = this.selectedDepartment[key];
        if (value) {

          this.deleteSubscription(value)

        }

      }

  }
  deleteSubscription(value: string) {

    const self = this;

    const subscription =
        this.confirmationObservable.subscribe({
          next: (response: { status: string }) => {
            subscription.unsubscribe();
            self.actionConfirmed.call(self, response.status, value);
          }
    })

  }
  private actionConfirmed( status: string, value: string) {
    console.log(status)
    // deleting function call
  }


  //function onClick
  confirmDeleteFromYourConfirmationModal(bool) {
    if (bool) {
      this.confirmationObserver.next({response: 'success'})
    } else {
      // dissmiss modal
    }
  }

（Angular）使用动态参数进行路由

1 个答案: