将 html ngModel 值传递给服务 --Angular

Question

我想传递一个 html ngModel 值它位于 Combocomponent.html 上，连接到名为 Home.service.ts 的服务。

在服务内部，我有以下代码：

  selectedYear=2022;

  configUrl1 = 'https://localhost:44361/api/Active_Serviced_Outlets?Year='+this.selectedYear+'&quarter=1&month=1';
  getMethod1() {
    
    return this.http.get(this.configUrl1);
  }

我想动态地将 [(ngModel)]="selectedYear" 值传递给选定的年份，以便每次用户输入年份时。

ComboComponent.html

我想传递一个 html ngModel 值它位于 Combocomponent.html 上，连接到名为 Home.service.ts 的服务。

在服务内部，我有以下代码：

  configUrl1 = 'https://localhost:44361/api/Active_Serviced_Outlets?Year=2021&quarter=1&month=1';
  getMethod1() {
    
    return this.http.get(this.configUrl1);
  }

我想动态地将 [(ngModel)]="selectedYear" 值传递给选定的年份，以便每次用户输入年份时。

ComboComponent.html

<div class="row">
  <div class="column">

    <p> &nbsp; &nbsp;<b>Year </b></p>

    <kendo-dropdownlist [data]="year" [(ngModel)]="selectedYear"></kendo-dropdownlist>
  </div>
    </div>

ComboComponent.ts

  public year: Array<string> = [
    "2022",
    "2021",
    "2020",
    "2019",
    "2018",
  ];

  public get selectedYear() {
    return this._homeServise.selectedYear;
  }
  public set selectedYear(year: number) {
    this._homeServise.selectedYear = year;
  }

Answer 1

每当值更新时，您都需要将值传递给服务。

在模板中，

<kendo-dropdownlist (ngModelChange)="onChange($event)"  [data]="year" [(ngModel)]="selectedYear"></kendo-dropdownlist>

在 ts 中，

onChange(year){
 this._homeServise.selectedYear = this.selectedYear;
}