Html 如何绑定所选/选项值以获取service.ts而非component.ts中的请求函数（8）

我需要有关如何获取所选值并将其连接到我的“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>

<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>

如何将“valueFromSelect”从from.html绑定到service.ts，以便在选择项时，该值绑定到valueFromSelect=''

---

谢谢

您不能直接将

.html

绑定到服务实例。这是由您的

组件实现的。ts

因此，方法是将service.ts component.ts html绑定在一起。请参阅下面的代码片段

.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>

<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>

.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);
  }

}

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

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;
  }
}

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

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

  constructor() { }

}

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();
  } 
}

---

实际上，您需要将component.TS中的代码更改为此。 当下拉列表中的选择发生更改时，调用函数getImpl（）

组件。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);
  }

}

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

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;
  }
}

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

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

  constructor() { }

}

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();
  } 
}

.component.ts的这部分“This.sampleService.valueFromSelect=This.valueFromSelect”解决了这个问题。很高兴您在.html中显示了“（change）”。