Angular 订阅服务器在第二次单击时返回值

我从订阅者那里获得点击值，它在第二次点击时返回值。解决此问题后，我将重构此代码并拆分组件和函数。我认为这是订户的问题。我通过及时订阅observable并在获得值后取消订阅来解决这个问题，以避免每次单击之前的值重叠

我还在那个组件中使用了一个订户变量，我用多个观察值订阅该变量，并多次取消订阅。在创建多个订阅服务器后，该问题在该组件中得到了解决，但在这里没有得到纠正

  selector: 'smart-account-termination-table',
  templateUrl: './account-termination-table.component.html',
  styleUrls: ['./account-termination-table.component.css'],
})
export class AccountTerminationTableComponent implements OnInit {
  account_termination: Accountterminatio;

  empl: Observable<Employe[]>;
  employeeSalary: Observable<Empsalar[]>;
  depart: Observable<Departmentssection[]>;
  reason: Observable<Leavingreason[]>;
  form: FormGroup;
  form2: FormGroup;
  // form2:RowData[] = [];
  subscription: Subscription;

  attendance: Observable<Attendanc[]>;
  empCompany: Observable<Empcompanyinf[]>;
  items: Observable<Accountterminatio[]>;
  employees: any;
  sal: any;
  basic_salary: any = 0;
  emp_id: any;
  total_adds: any;
  dept_id: any;

  account_permanent_advances: Observable<Permanentadvance[]>;
  account_permanent_advances_employee: any;
  account_permanent_advances_deduction: Observable<
    Accountpermanentadvancedeductio[]
  >;
  account_permanent_advance_deduction_amount: any = 0;
  employee_temporary_advance: any = 0;
  notes_pay_status: any = '';
  this_other_benefits: any = 0;
  rfd_advance: any = 0;
  payment_date: any;
  fair_price_amount: any = 0;
  excessiveLeaveAmt: any = 0;
  excessiveLeaveDays: any = 0;
  total_leaves_avail: any = 0;
  canteen_deduction: any = 0;
  travel_allowance: any = 0;
  annual_leave_amount: any = 0;
  over_time: any = 0;
  total_subtractions: any = 0;
  total_additions: any = 0;
  remarks: any = 'Remarks';
  days_worked: any = 0;
  due_salary: any = 0;
  due_meal: any = 0;
  grand_total: any = 0;
  over_time_hours: any = 0;
  number_of_graduities: any = 0;
  due_graduity: any = 0;
  permanent_adv_taken: any = 0;
  permanent_advance_remaining: any = 0;
  termination_date: any = '';
  bonus: any = 0;
  employee_company_info_update: Empcompanyinf = null;
  employee_permanent_advance_deduction: Accountpermanentadvancedeductio = null;
  subscription_employee: Subscription;
  subscription_salary: Subscription;
  subscription_salary_basic: Subscription;
  subscription__pa_deduction: Subscription;
  subscription_permanent_advance: Subscription;
  subscription_department: Subscription;
  subscription_attendance: Subscription;

  get f() {
    return this.form.controls;
  }
  constructor(private fb: FormBuilder, private store: Store<any>) {}
  private buildForm() {
    this.form2 = this.fb.group({
      search: [
        this.account_termination
          ? this.account_termination.Employee.CardNo.name
          : '',
      ],
    });
    this.form = this.fb.group({
      id: [this.account_termination ? this.account_termination.id : null],
      DaysWorked: [
        this.account_termination
          ? this.account_termination.DaysWorked
          : this.days_worked,
      ],
      DueSalary: [
        this.account_termination
          ? this.account_termination.DueSalary
          : this.due_salary,
      ],
      DueMeal: [
        this.account_termination
          ? this.account_termination.DueMeal
          : this.due_meal,
      ],
      DueOTAmount: [
        this.account_termination
          ? this.account_termination.DueOTAmount
          : this.over_time,
      ],
      NoOfGraduties: [
        this.account_termination
          ? this.account_termination.NoOfGraduties
          : this.number_of_graduities,
      ],
      DueGraduaty: [
        this.account_termination
          ? this.account_termination.DueGraduaty
          : this.due_graduity,
      ],
      NotesPayStatus: [
        this.account_termination
          ? this.account_termination.NotesPayStatus
          : this.notes_pay_status,
      ],
      NotesPayAmount: [this.account_termination ? 20 : 0],
      OtherBenefits: [
        this.account_termination
          ? this.account_termination.OtherBenefits
          : this.this_other_benefits,
      ],
      PAdv: [
        this.account_termination
          ? this.account_termination.PAdv
          : this.permanent_advance_remaining,
      ],
      TAdv: [
        this.account_termination
          ? this.account_termination.TAdv
          : this.employee_temporary_advance,
      ],
      TotalAdditions: [
        this.account_termination
          ? this.account_termination.TotalAdditions
          : this.total_adds,
      ],
      TotalSubtractions: [
        this.account_termination
          ? this.account_termination.TotalSubtractions
          : this.total_subtractions,
      ],
      GrandTotal: [
        this.account_termination
          ? this.account_termination.GrandTotal
          : this.grand_total,
      ],
      TransactionDate: [
        this.account_termination
          ? this.account_termination.TransactionDate
          : '0',
      ],
      PreviousSalDue: [
        this.account_termination
          ? this.account_termination.PreviousSalDue
          : '0',
      ],

      DueBonus: [
        this.account_termination
          ? this.account_termination.DueBonus
          : this.bonus,
      ],
      PreviousTAdv: [
        this.account_termination ? this.account_termination.PreviousTAdv : '0',
      ],
      PreviousPAdv: [
        this.account_termination ? this.account_termination.PreviousPAdv : '0',
      ],
      PaymentStatus: [
        this.account_termination
          ? this.account_termination.PaymentStatus
          : false,
      ],
      TerminationTransferState: [
        this.account_termination
          ? this.account_termination.TerminationTransferState
          : '0',
      ],
      TransferredTo: [
        this.account_termination
          ? this.account_termination.TransferredTo
          : 'John Doe',
      ],
      Remarks: [
        this.account_termination
          ? this.account_termination.Remarks
          : this.remarks,
      ],
      OTHours: [
        this.account_termination
          ? this.account_termination.OTHours
          : this.over_time_hours,
      ],
      BasicSalary: [
        this.account_termination
          ? this.account_termination.BasicSalary
          : this.basic_salary,
      ],
      AnnualLeavesAmt: [
        this.account_termination
          ? this.account_termination.AnnualLeavesAmt
          : this.annual_leave_amount,
      ],
      TravelAllowance: [
        this.account_termination
          ? this.account_termination.TravelAllowance
          : this.travel_allowance,
      ],
      IPAddress: [
        this.account_termination
          ? this.account_termination.IPAddress
          : '10.23783.3983',
      ],
      EntryTime: [
        this.account_termination ? this.account_termination.EntryTime : '',
      ],
      ConteenDed: [
        this.account_termination
          ? this.account_termination.ConteenDed
          : this.canteen_deduction,
      ],
      TotalLeavesAvail: [
        this.account_termination
          ? this.account_termination.TotalLeavesAvail
          : '0',
      ],
      ExcessiveLeaveDays: [
        this.account_termination
          ? this.account_termination.ExcessiveLeaveDays
          : '0',
      ],
      ExcessiveLeaveAmt: [
        this.account_termination
          ? this.account_termination.ExcessiveLeaveAmt
          : this.excessiveLeaveAmt,
      ],
      FairShopAmt: [
        this.account_termination
          ? this.account_termination.FairShopAmt
          : this.fair_price_amount,
      ],
      PaymentDate: [
        this.account_termination
          ? this.account_termination.PaymentDate
          : this.payment_date,
      ],
      RFDAdvRec: [
        this.account_termination
          ? this.account_termination.RFDAdvRec
          : this.rfd_advance,
      ],
      Employee: [
        this.account_termination
          ? this.account_termination.Employee.id
          : this.emp_id,
      ],
      Department: [
        this.account_termination
          ? this.account_termination.Department.id
          : this.dept_id,
      ],
      TerminationDate: [
        this.account_termination
          ? this.account_termination.TerminationDate
          : this.termination_date,
      ],
    });
  }
  ngOnInit() {
    this.buildForm();
    this.store.dispatch(loadEmployee());
    this.empl = this.store.select(selectAllEmployee);
    this.store.dispatch(loadEmpsalary());
    this.sal = this.store.select(selectAllSalarytransactions);

    this.employeeSalary = this.store.select(selectAllEmpsalary);
    this.store.dispatch(loadEmpcompanyinfo());
    this.empCompany = this.store.select(selectAllEmpcompanyinfo);
    this.store.dispatch(loadSalarytransactions());

    this.store.dispatch(loadPermanentadvances());

    this.account_permanent_advances = this.store.select(
      selectAllPermanentadvances
    );

    this.store.dispatch(loadAccountpermanentadvancededuction());

    this.account_permanent_advances_deduction = this.store.select(
      selectAllAccountpermanentadvancededuction
    );

    this.store.dispatch(loadAttendance());
    this.attendance = this.store.select(selectAllAttendance);

  
    this.store.dispatch(loadDepartmentssections());
    this.depart = this.store.select(selectAllDepartmentssections);


  }

  onSubmit1() {
    let val = this.form2.controls.search.value;
    this.subscription_employee = this.empl.subscribe(async (event) => {
      const emp = await event.filter(
        (employee) => employee.EmpCardNo.name == val
      );
    
      console.log('employee', emp);
      this.subscription_salary = this.sal.subscribe(async (salary) => {
        //filter salary transaction for that employee
        const salaryT = await salary.filter(
          (employee) => employee.Employee.id == emp[0].id
        );
        console.log('salary transaction', salaryT);
        this.subscription_salary_basic = this.employeeSalary.subscribe(
          (basic_salary) => {
            const basic_sal = basic_salary.filter(
              (employee) => employee.id == emp[0].id
            );
            console.log('basic', basic_sal);
            //select department idx
            this.subscription_department = this.empCompany.subscribe(
              (departments) => {
                const dep = departments.filter(
                  (empl) => empl.Employee.id == emp[0].id
                );
                console.log('company info', dep);
                this.subscription_permanent_advance =
                  this.account_permanent_advances.subscribe((employees) => {
                    const employee_permanent_advances = employees.filter(
                      (employee) => employee.id == emp[0].id
                    );
                    console.log(
                      'employee data from permanent advances',
                      employee_permanent_advances
                    );
                    this.subscription__pa_deduction =
                      this.account_permanent_advances_deduction.subscribe(
                        (employees) => {
                          const employee_permanent_advance_loaded =
                            employees.filter(
                              (employee) => employee.id == emp[0].id
                            );
                          console.log(
                            'employee loaded from advance deduction',
                            employee_permanent_advance_loaded
                          );
                          this.subscription_attendance =
                            this.attendance.subscribe((attendances) => {
                              const days = attendances.filter(
                                (employee) => employee.Employee.id == emp[0].id
                              );
                              console.log('Days', days);
                              this.setEmployee(
                                emp,
                                salaryT,
                                basic_sal,
                                dep,
                                employee_permanent_advances,
                                employee_permanent_advance_loaded,
                                days
                              );
                            });
                        }
                      );
                  });
              }
            );
          }
        );
      });
    });

    this.buildForm();
  }

  //start date and end date
  get_number_of_days(start, end) {
    const date1 = new Date(start);
    const date2 = new Date(end);

    // One day in milliseconds
    const oneDay = 1000 * 60 * 60 * 24;

    // Calculating the time difference between two dates
    const diffInTime = date2.getTime() - date1.getTime();

    // Calculating the no. of days between two dates
    const diffInDays = Math.round(diffInTime / oneDay);

    return diffInDays;
  }
  parse_date(str) {
    var mdy = str.split('/');
    return new Date(mdy[2], mdy[0] - 1, mdy[1]);
  }

  date_diff(first, second) {
    // Take the difference between the dates and divide by milliseconds per day.
    // Round to nearest whole number to deal with DST.
    return Math.round((second - first) / (1000 * 60 * 60 * 24));
  }

  //takes year as parameter and returns number of days in it
  days_of_a_year(year) {
    return this.is_leap_year(year) ? 366 : 365;
  }
  //check if the year is a leap year or not
  is_leap_year(year) {
    return year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0);
  }
  parseTime(s) {
    var c = s.split(':');
    return parseInt(c[0]) * 60 + parseInt(c[1]);
  }

  //takes month and year, returns days in month
  function(month, year) {
    return new Date(year, month, 0).getDate();
  }

  selectAllSelector = selectAllAccounttermination;
  selectCurrent = selectCurrentAccountterminatio;

  setEmployee(
    employee: any,
    salarytransaction: any,
    basic_sal: any,
    department: any,
    employee_permanent_advances,
    employee_permanent_advance_loaded,
    days: any
  ) {
    this.grand_total = 0;
    this.total_subtractions = 0;
    this.emp_id = employee[0].id;

    this.total_adds = salarytransaction[0].TotalAdds;

    this.basic_salary = basic_sal[0].BasicSalary;

    this.dept_id = department[0].Department.id;

    this.rfd_advance = salarytransaction[0].RFDAdvDed;

    this.fair_price_amount = department[0].FairPriceLimit;
    this.canteen_deduction = salarytransaction[0].MealDeduction;
    this.travel_allowance = basic_sal[0].TravelAllowance;
    this.days_worked = salarytransaction[0].WorkedDays;

    this.due_meal = this.days_worked * salarytransaction[0].MealDeduction;
    console.log('Over time', this.days_worked);
    let daily_salary = this.basic_salary / 26;
    this.due_salary = salarytransaction[0].DueSalary;
    console.log('due_salary', this.due_salary);

    this.over_time = (
      (daily_salary / 6) *
      salarytransaction[0].OverTimeHours
    ).toFixed(2);

    this.over_time_hours = salarytransaction[0].OverTimeHours;
    this.permanent_adv_taken = salarytransaction[0].LongTermAdvAmount;
    this.permanent_advance_remaining = salarytransaction[0].LTARemaining;
    this.total_subtractions += this.permanent_advance_remaining;
    console.log('pAR', this.permanent_advance_remaining);

    let year_of_joinig = department[0].DateOfJoning.split('-');
    // console.warn("month of joining", year_of_joinig[1]);]
    var dt = new Date();

    // dt.getMonth() will return a month between 0 - 11
    // we add one to get to the last day of the month
    // so that when getDate() is called it will return the last day of the month
    var month = dt.getMonth() + 1;
    var year = dt.getFullYear();
    var day = dt.getDay();

    console.log('YOJ', year_of_joinig);

    let number_of_days_grad = this.get_number_of_days(
      [year_of_joinig[1], year_of_joinig[2], year_of_joinig[0]].join('/'),
      [month, day, year].join('/')
    );
    if (number_of_days_grad / 30 >= 6 && number_of_days_grad <= 180) {
      this.number_of_graduities = 1;
      console.log('number of months', number_of_days_grad / 30);
    } else {
      this.number_of_graduities =
        (number_of_days_grad / 365) % 1 > 0.5
          ? Math.round(number_of_days_grad / 365)
          : Math.floor(number_of_days_grad / 365);
      console.log('graduities', this.number_of_graduities);
    }
this.function(year_of_joinig[1],year_of_joinig[0])
 

    this.due_graduity = (
      this.number_of_graduities *
      (daily_salary * 30)
    ).toFixed(0);
  
    this.employee_temporary_advance = salarytransaction[0].ShortTermAdvance;
    this.total_subtractions += salarytransaction[0].TotalSubtracts;
    this.total_subtractions += this.employee_temporary_advance;

    this.total_adds += this.due_graduity;
    this.grand_total = this.total_adds - this.total_subtractions;

    //TotalShortTermAdvance from salary transaction table

    this.employee_company_info_update = department;
    this.employee_permanent_advance_deduction =
      employee_permanent_advance_loaded;
  }
  onSubmit(event) {
    console.log('peramnent update', this.employee_permanent_advance_deduction);
    console.log(
      'employee company info update',
      this.employee_company_info_update
    );
    this.employee_permanent_advance_deduction[0].LTAPayBack +=
      this.employee_permanent_advance_deduction[0].LTARemaining;
    this.employee_permanent_advance_deduction[0].LTARemaining = 0;
    this.employee_permanent_advance_deduction[0].TotalDeduction = 0;
    this.employee_permanent_advance_deduction[0].PAdvDedAmount = 0;
    this.employee_permanent_advance_deduction[0].LongTermAdvAmount = 0;
    this.employee_permanent_advance_deduction[0].Employee =
      this.employee_permanent_advance_deduction[0].Employee.id;
    this.employee_permanent_advance_deduction[0].FinancialPeriod =
      this.employee_permanent_advance_deduction[0].FinancialPeriod.id;

    this.store.dispatch(
      addAccountpermanentadvancedeductio({
        data: this.employee_permanent_advance_deduction[0],
      })
    );
    this.employee_company_info_update[0].EmpStatus = false;
    this.employee_company_info_update[0].Bank =
      this.employee_company_info_update[0].Bank.id;
    this.employee_company_info_update[0].Branch =
      this.employee_company_info_update[0].Branch.id;
    this.employee_company_info_update[0].BusRoute =
      this.employee_company_info_update[0].BusRoute.id;
    this.employee_company_info_update[0].Department =
      this.employee_company_info_update[0].Department.id;
    this.employee_company_info_update[0].Designation =
      this.employee_company_info_update[0].Designation.id;
    this.employee_company_info_update[0].EmpCatagory =
      this.employee_company_info_update[0].EmpCatagory.id;
    this.employee_company_info_update[0].EmpReportTo =
      this.employee_company_info_update[0].EmpReportTo.id;
    this.employee_company_info_update[0].EmpReportTo1 =
      this.employee_company_info_update[0].EmpReportTo1.id;
    this.employee_company_info_update[0].Employee =
      this.employee_company_info_update[0].Employee.id;
    this.employee_company_info_update[0].GradeID =
      this.employee_company_info_update[0].GradeID.id;
    this.employee_company_info_update[0].Section =
      this.employee_company_info_update[0].Section.id;
    this.employee_company_info_update[0].Shift =
      this.employee_company_info_update[0].Shift.id;
    this.store.dispatch(
      addEmpcompanyinf({ data: this.employee_company_info_update[0] })
    );

    console.log(this.form.controls);
    Object.keys(this.form.controls).forEach((field) => {
      const control = this.form.get(field);
      control.markAsTouched({ onlySelf: true });
      control.markAsDirty({ onlySelf: true });
    });
    if (this.form.invalid) return;

    Object.keys(this.form.controls).forEach((field) => {
      const control = this.form.get(field);
      control.markAsTouched({ onlySelf: true });
      control.markAsDirty({ onlySelf: true });
    });
    if (this.form.invalid) return;

    let mat = { ...this.form.value };

    let formData = new FormData();
    for (const key of Object.keys(mat)) {
      if (mat[key]) formData.append(key, mat[key]);
    }
    console.warn('Form Values', this.form.value);
    formData.append('update', 'true');
    this.store.dispatch(addAccountterminatio({ data: this.form.value }));
  }
  ngOnDestroy(): void {
    this.subscription_employee.unsubscribe();
    this.subscription__pa_deduction.unsubscribe();
    this.subscription_attendance.unsubscribe();
    this.subscription_department.unsubscribe();
    this.subscription_salary.unsubscribe();
    this.subscription_salary_basic.unsubscribe();
    this.subscription_permanent_advance.unsubscribe();
  }
}```

选择器：“智能账户终止表”，
templateUrl:“./account termination table.component.html”，
styleUrls:['./帐户终止表.component.css']，
})
导出类AccountTerminationTableComponent实现OnInit{
账户终止：账户终止；
emp：可观察的；
员工工资：可观察的；
分离：可见；
原因：可见；
表格：表格组；
表格2：表格组；
//表格2:RowData[]=[]；
认购：认购；
出席人数：可观察；
公司：可见；
项目：可观察；
员工：任何；
萨尔：有；
基本工资：任意=0；
emp_id：任何；
总数加上：任何；
部门id：任何；
账户永久性预付款：可观察；
账户\永久\预付款\员工：任何；
账户\永久\预付款\扣除额：可观察<
会计永久预付款扣除额[]
>;
科目\永久\预付\扣减\金额：任意=0；
员工临时预付款：任意=0；
注：支付状态：任何=“”；
此项其他好处：任意=0；
rfd_预付款：任意=0；
付款日期：任何；
公平价格金额：任意=0；
超额金额：任意=0；
超额休假天数：任意=0；
总可用叶数：任意=0；
食堂扣款：任意=0；
差旅津贴：任意=0；
年假金额：任意=0；
随时间：任意=0；
总减法：任意=0；
总添加量：任意=0；
备注：任何=‘备注’；
工作天数：任意=0；
到期工资：任意=0；
到期餐：任意=0；
总计：任意=0；
超过时间：任意=0；
等级数：任意=0；
到期日：任意=0；
采取的永久措施：任何=0；
永久性提前/剩余：任意=0；
终止日期：任何=“”；
奖金：任意=0；
员工\公司\信息\更新：Empcompanyinf=null；
员工\永久\预付\扣减：AccountPermanentAdvanceDecredito=null；
订阅\员工：订阅；
认购工资：认购；
订阅\薪资\基本：订阅；
认购额扣除额：认购额；
认购\永久\预付款：认购；
认购部门：认购；
订阅/出席：订阅；
得到f（）{
返回此.form.controls；
}
构造函数（私有fb:FormBuilder，私有存储：存储）{}
私有buildForm（）{
this.form2=this.fb.group({
搜索：[
这是我的账户
？此.account\u termination.Employee.CardNo.name
: '',
],
});
this.form=this.fb.group({
id:[this.account\u termination？this.account\u termination.id:null]，
DaysWorked：[
这是我的账户
？该账户已终止
：这个。你工作了几天，
],
工资：[
这是我的账户
？本账户\终止支付工资
：这是应得的薪水，
],
决斗：[
这是我的账户
？这是一个账户
：这顿饭，
],
杜奥塔蒙特：[
这是我的账户
？此.account_termination.DueOTAmount
：随着时间的推移，
],
NoOfGraduties：[
这是我的账户
？该账户不存在终止权
：this.numberofu梯度，
],
毕业典礼：[
这是我的账户
？本账户\终止账户\毕业
：this.due\u graduity，
],
注：系统状态：[
这是我的账户
？此.account_termination.notespacystatus
：this.notes\u pay\u状态，
],
NotesPayAmount:[此帐户\终止？20:0]，
其他好处：[
这是我的账户
？本账户\终止。其他利益
：this.this\u其他利益，
],
PAdv:[
这是我的账户
？本账户\终止.PAdv
：这是永久性的(预付)(剩余),，
],
TAdv：[
这是我的账户
？此.account_termination.TAdv
：这是员工的临时预付款，
],
总添加量：[
这是我的账户
？该账户_终止总增加额
：this.total_加起来，
],
总减法：[
这是我的账户
？此项。账户终止。总减法
：this.total_减法，
],
总计：[
这是我的账户
？本账户_终止合计
：这个。总计，
],
交易日期：[
这是我的账户
？本账户\终止交易日期
: '0',
],
上一次到期：[
这是我的账户
？本账户\终止前到期
: '0',
],
会费奖金：[
这是我的账户
？此账户\终止。奖金
：这是奖金，
],
先前的TADV：[
this.account\u termination？this.account\u termination.PreviousTAdv:'0'，
],
先前的PADV：[
this.account\u termination？this.account\u termination.PreviousPAdv:'0'，
],
付款状态：[
这是我的账户
？此帐户\终止付款状态
：错，
],
终止转移状态：[
这是我的账户
？thi