如何将C#字典绑定到angular 6材质中的下拉列表

Dictionary<string, string> myDictionary = new Dictionary<string, string>();
myDictionary.Add("key1", "value1");
myDictionary.Add("key2", "value2");
myDictionary.Add("key3", "value3");

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  dictionaryData: any[];

  constructor() {
    // 从后端获取C#字典数据，并将其赋值给dictionaryData属性
    // 可以使用HttpClient模块发送HTTP请求获取数据
    // 示例代码如下：
    // this.http.get<any[]>('api/dictionary').subscribe(data => {
    //   this.dictionaryData = data;
    // });
    // 假设后端API返回的数据格式为[{ key: 'key1', value: 'value1' }, { key: 'key2', value: 'value2' }, ...]
  }
}

<mat-form-field>
  <mat-select placeholder="Select an option">
    <mat-option *ngFor="let item of dictionaryData" [value]="item.key">
      {{ item.value }}
    </mat-option>
  </mat-select>
</mat-form-field>