如何绑定选定/选项值以在 service.ts 而不是 component.ts 中获取请求功能（Angular 8）

Question

我需要有关如何获取选定值并将其连接到我的“service.ts”中的 url 的帮助，然后使用将 url 放置在我的 component.ts 中的函数。我知道如何将 component.html 中的数据绑定到 component.ts，但我想知道的是绑定到 service.ts。请参阅下面的代码：

component.html

<select class="browser-default custom-select" [(ngModel)]="bindSelect">
  <option value="" selected disabled>Choose item</option>
  <option [value]="mydata.name" *ngFor="let mydata of vList$">
     <td>{{ mydata.id }} - {{ mydata.name }}</td>
  </option>
</select>

service.ts

export class ItenService {
   constructor(private http: HttpClient) { }

myUrl = 'http://localhost:4045/store/itemList';
valueFromSelect = '';

getData() {
    return this.http.get<itemData[]>('http://localhost:4045/store/itemList/' + this.valueFromSelect);
  }

}

component.ts

export class ItemComponent implements OnInit {
vList$ = [];
bindSelect = '';
  constructor(private idataService: IdataService) { }
  ngOnInit() {
    this.getImpl();
  } 
  getImpl() {
    // impl service.ts function here
  } 
}

如何将“valueFromSelect”从.html绑定到service.ts，这样当我选择item时，值绑定到valueFromSelect = ' ';

谢谢

Answer 1

其实你需要把component.TS中的代码改成这个。 当下拉列表中的选择发生变化时调用函数 getImpl()。

component.ts

export class ItemComponent implements OnInit {
vList$ = [];
bindSelect = '';
  constructor(private idataService: IdataService,private ItenService: ITenService) { }
  ngOnInit() {
    this.getImpl();
  } 
  getImpl() {
    this.ItenService.valueFromSelect = this.bindSelect;
    // impl service.ts function here
      this.ItenService.getData();
  } 
}

Answer 2

您不能直接将您的.html 绑定到服务实例。您的component.ts 促进了这一点

所以方法是将service.ts-component.ts-html绑定在一起。请参阅下面的 sn-p。

StackBlitz Demo

.html

<select class="browser-default custom-select" [(ngModel)]="valueFromSelect" (change)="onSelect()">
  <option value="" selected disabled>Choose item</option>
  <option [value]="mydata.name" *ngFor="let mydata of vList">
     <td>{{ mydata.id }} - {{ mydata.name }}</td>
  </option>
</select>

.component.ts

import { Component, OnInit } from '@angular/core';

import { SampleService } from './app.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  vList;
  valueFromSelect;

  constructor(private sampleService: SampleService) { }

  ngOnInit() {
    // gets from service
    this.vList = this.sampleService.vList;
  }

  onSelect() {
    console.log(this.valueFromSelect);
    // sets to the service
    this.sampleService.valueFromSelect = this.valueFromSelect;
  }
}

.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class SampleService {
  vList = [{
    id: 1,
    name: 'Bob'
  }];
  valueFromSelect;

  constructor() { }

}