将 html ngModel 值传递给服务 angular

Question

我想传递一个 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 class="column">

    <p> &nbsp; &nbsp;<b>Month</b></p>
    <kendo-dropdownlist [data]="Month" [(ngModel)]="selectedMonth"> </kendo-dropdownlist>
  </div>
  <div class="columnA">
    <p> &nbsp; &nbsp;<b>Quarter</b></p>
    <kendo-dropdownlist style=" width: 92%;" [data]="Quarter" [(ngModel)]="selectedQuarter"> </kendo-dropdownlist>
  </div>

   
</div>
<br />
<!--<div class="example-config">
  &nbsp; &nbsp;Selected Values: {{selectedYear}} &nbsp; &nbsp; {{selectedMonth}} &nbsp; &nbsp; {{selectedQuarter}}
</div>-->

谢谢！

Answer 1

您只需要 selectedYear 为您服务。

service.ts

public selectedYear = 1900; // You can default to any year or make it null.


getWhatever() {
  
  const url = `https://example/api/whatever?Year=${selectedYear}`
  return this.http.get(url);
}

然后在组件中，将 selectedYear 包裹在 getter 和 setter.

中

component.ts

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

constructor(
  private readonly _service: myService
){}

最后，在 HMTL 中使用 getter/setter。 component.html

<select [(ngModel)]="selectedYear">
...
</select>

这里是 demo.

将 html ngModel 值传递给服务 angular

Pass an html ngModel value to service angular

angular

combobox

kendo-ui