如何从后端以角度形式放置选择下拉元素

问题描述

我是角度的新手。我的要求是将城市（来自后端）放在下拉列表中，但我已经尝试过，但我无法做到这一点。

.service.ts

getcitiNames(): Observable<any> {
    return this.http.get(this.baseUrl + '/api/data/xxx/city/getcity');
  }

从上面的 API 我必须获取下拉元素并将其放置在选择下拉列表中

.ts

 {
      key: 'Select',type: 'select',className: 'select-stlyes',templateOptions: {
        label: 'Status',options: [
          { value: 1,label: 'data1' },{ value: 2,label: 'data2' },{ value: 3,label: 'data3' }
        ],},

谁能帮我解决这个问题

解决方法

假设您的 API 返回一个 string[]，其中包含要在下拉列表中填充的值。从您的角度组件中，您必须构造 FormlyFields[] 以准备表单。

我建议您为推送到 key 的每个 field 对象维护一个唯一的 fields[]。这将帮助您确定哪个元素是哪个元素并相应地填充数据。

 {
      key: 'countries',type: 'select',className: 'select-stlyes',templateOptions: {
        label: 'Status',options: [
          { value: 1,label: 'data1' },{ value: 2,label: 'data2' },{ value: 3,label: 'data3' }
        ],},}

订阅具有下拉值的 API 后，

yourApi().subscribe((response: any) => {
  const fieldToPopulate = this.fields.find(f => f.key === 'countries');
  // assuming response has values like this: ['Italy','France']
  response.forEach(country => {
    // Ideally `value` will also be dynamic if your API returns a Dictionary<string,string>
    fieldToPopulate.templateOptions.options.push(value:1,country);
  });
});