如何在API调用中将Mat-Select值传递到标头

import { Component } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-example',
  template: `
    <mat-form-field>
      <mat-label>Select Value</mat-label>
      <mat-select [(ngModel)]="selectedValue">
        <mat-option value="value1">Value 1</mat-option>
        <mat-option value="value2">Value 2</mat-option>
        <mat-option value="value3">Value 3</mat-option>
      </mat-select>
    </mat-form-field>
    <button (click)="sendRequest()">Send Request</button>
  `,
})
export class ExampleComponent {
  selectedValue: string;

  constructor(private http: HttpClient) {}

  sendRequest() {
    const headers = new HttpHeaders().set('Custom-Header', this.selectedValue);

    this.http.get('https://api.example.com/data', { headers }).subscribe(
      (response) => {
        // 处理API响应
      },
      (error) => {
        // 处理错误
      }
    );
  }
}