当我尝试将参数发送到后端时没有反应

Question

我在 Angular 中有一个删除组件。在删除组件中，我有两个选择。在第一个选择中，我可以选择月份，在第二个选择中选择年份。我想在选择选项值后单击删除按钮将参数月份和年份发送到后端。我已经为此编写了代码，不幸的是，当我单击删除按钮时，浏览器中的控制台对我的代码的执行完全没有反应。我做错了什么？

我的代码：

// HTML

<div class="col-md-12" id="select-content">
              <ul>
                <!-- Select month to send params for delete balancelist -->
                <li>
                  <div class="select-wrapper">
                    <form [formGroup]="sendMonthsForm">
                      <select class="upload_slc" required title="" formControlName="monthsValue" (change)="sendMonth($event)">
                        <!-- Options -->
                        <option value="content" *ngFor="let monthsValue of sendMonths" [value]="monthsValue">
                          {{ monthsValue }}
                        </option>
                      </select>
                      <div class="select_arrow"></div>
                    </form>
                  </div>
                </li>
                <!-- Select year to send params for delete balancelist -->
                <li>
                  <div class="select-wrapper">
                    <form [formGroup]="sendYearsForm">
                      <select class="upload_slc" required title="" formControlName="yearsValue" (change)="sendYear($event)">
                        <option *ngFor="let yearsValue of sendYears" [value]="yearsValue">
                          {{yearsValue}}
                        </option>
                      </select>
                      <div class="select_arrow"></div>
                    </form>
                  </div>
                </li>
                <li>
                  <div class="optimize-buttons-group">
                    <button type="button" class="btn-delete" mat-button (click)="deleteBalanceList(this.sendMonthsForm.value.monthsValue, this.sendYearsForm.value.yearsValue)">delete</button>
                  </div>
                </li>
              </ul>
            </div>

// TS

// Forms
  sendMonthsForm: FormGroup;
  sendYearsForm: FormGroup;

  // Selects to send params
  currentDate: Date = new Date();
  selectedMonth: number;
  selectedYear: number;

  // Use this to delete data
  public deleter;

// All month
  sendMonths: Array<string> = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];

  // All years
  sendYears: Array<string> = [];

ngOnInit() {
    // Month form
    this.sendMonthsForm = this.formBuilder.group({
      monthsValue: [null]
    });
    // Year form
    this.sendYearsForm = this.formBuilder.group({
      yearsValue: [null]
    });
    // Set current month default
    this.selectedMonth = this.currentDate.getMonth() + 1;
    this.sendMonthsForm.controls.monthsValue.patchValue(this.selectedMonth);
    // Set current year default
    this.selectedYear = this.currentDate.getFullYear();
    this.sendYearsForm.controls.yearsValue.patchValue(this.selectedYear);
    // Show the current year with -5 and currentYear
    for (let i = this.currentDate.getFullYear() - 5; i <= this.currentDate.getFullYear(); i++) {
      this.sendYears.push(String(i));
    }
  }

deleteBalanceList(month: string, year: string) {
    console.log('Setting deleter to:', month, year);
    if (this.deleter && this.deleter.length > 0) {
      this.balanceListService.deleteBalanceListData(month, year).subscribe((data) => {
        if (data.success) {
          this.deleter = data.deleter;
          this.alertType = 'success';
          this.showAlert('Die ausgewählten Daten wurden erfolgreich gelöscht!');
        } else {
          this.alertType = 'error';
          this.showAlert('Die ausgewählten Daten konnten nicht gelöscht werden!');
        }
      }, (error: any) => {
        console.log(error);
      });
      this.currentDeleteBalanceList.emit({ deleter: this.deleter, month, year });
    }
  }

  /**
   * Getter method to access formcontrols
   */
  get monthsValue() {
    return this.sendMonthsForm.get('monthsValue');
  }

  get yearsValue() {
    return this.sendYearsForm.get('yearsValue');
  }

  /**
   * Choose month using select dropdown
   * @param e any
   */
  sendMonth(e) {
    console.log(this.sendMonthsForm.value);
    this.monthsValue.setValue(e.target.value, {
      onlySelf: true
    });
    this.deleteBalanceList(this.sendMonthsForm.value.monthsValue, this.sendYearsForm.value.yearsValue);
  }

  /**
   * Choose year using select dropdown
   * @param e any
   */
  sendYear(e) {
    console.log(this.sendYearsForm.value);
    this.yearsValue.setValue(e.target.value, {
      onlySelf: true
    });
    this.deleteBalanceList(this.sendMonthsForm.value.monthsValue, this.sendYearsForm.value.yearsValue);
  }

  sendCloseEvent() {
    this.currentDeleteBalanceList.emit(true);
  }

  public showAlert(message: string, alertType: string = 'success') {
    this.alertType = null;
    this.message = null;
    if (message) {
      const self = this;
      setTimeout(() => {
        self.alertType = alertType;
        self.message = message;
      }, 1);
    }
  }

Answer 1

您不需要将参数发送到 ts 文件，因为它们可以直接访问

get monthsValue() 
 get yearsValue()

您创建的方法。

另外，一个好的代码应该是带有一个表单组的单个表单，多个表单控件 按钮作为提交按钮，此方法在表单上调用，如

<form [formGroup]="dateForm" (ngSubmit)="deleteBalanceList()">
</form>

在您的 ts 文件中，您必须更改 formGroup 名称，在方法中您可以获得类似的值

deleteBalanceList() {
const months = this.monthsValue();
const years=  this.yearsValue();

...your code here
}

我不确定为什么现在不调用您的方法。但我最好的猜测是因为控制台或两个表单上的一些错误。如果你的控制台没有错误并且你按照我说的去做，我希望你的代码能正常工作。