如何创建html select，在select更改时触发相关的Angular服务方法调用

Question

我想创建一个包含下拉/选择的 Angular 组件，用户可以在多个服务的多个方法之间进行选择，并且所选方法将在选择更改时调用。这些方法是不同 HTTP 调用的包装器

我想以这样一种方式做到这一点，理想情况下会有一个对象（单一事实来源）包含所有必要的信息，例如：

• 选择选项标签
• 一些补充说明
• 选择时调用的方法

export const METHODS = [
  {
    label: "Get items for overview",
    description: "Request retrieving the list of items displayed in the overview"
    method: OveriewService.getItems // the getItems method from the Overview Service
  }, {
    label: "Get detailed overview data",
    description: "Request retrieving the detailed data for the overview"
    method: OveriewService.getDetailedData // the getDetailedData method from the Overview Service
  },{
    label: "Get users",
    description: "Request retrieving the list of users"
    method: UserService.getUsers // the getUsers method from the User Service
  }
]

组件

import METHODS from 'path/to/definitions'

@Component({
  selector: 'app-data-sandbox',
  templateUrl: './data-sandbox.component.html',
  styleUrls: ['./data-sandbox.component.scss'],
})
export class DataSandboxComponent implements OnInit {
  methods = METHODS;
  data = {};

  constructor(private overviewService: OveriewService, usersService: UserService) {}

  callSelectedMethod(method) {

    method({} as HttpParams).subscribe(response => {
      this.data = response;
    });
  }
}

Answer 1

使用.bind(服务)

示例：

protected readonly METHODS = [
    {
      label: 'getOne',
      desc: 'one',
      method: this.oneService.getOne.bind(this.oneService),
    },
    {
      label: 'getTwo',
      desc: 'two',
      method: this.oneService.getTwo.bind(this.oneService),
    },
    {
      label: 'getThree',
      desc: 'three',
      method: this.oneService.getThree.bind(this.oneService),
    },
  ];
  
  change(index: number) {
    this.METHODS[index].method().subscribe((data: any) => {});
  }