问题

I'm working on ABP framework with Angular UI, and I'm currently working dynamic forms, so I have a dropdown as:

我正在使用ABP框架和Angular UI工作，目前正在处理动态表单，所以我有一个下拉框如下：

const timeZoneProp = new FormProp({
type: ePropType.Enum,
name: 'TimeZoneId',
displayName: '::TimeZone',
isExtra: true,
id: 'TimeZoneId',
autocomplete: 'off',
validators: () => [Validators.required],
options: (data: PropData): Observable<Option[]> => {
const service = data.getInjected(TimeZoneService);
return service
.getList()
.pipe(
map(
response =>
response.items?.map(
item =>
({ key: item.description, value: item.id } as Option)
) || []
)
);
}
});

propList.addByIndex(timeZoneProp, 6);

This is working as expected; I have a dropdown with data displayed, and now I want to auto-select a value on the dropdown load, so I noticed there is a defaultValue option in the documentation:

这正如预期的那样工作；我有一个下拉框显示数据，现在我想在加载下拉框时自动选择一个值，所以我注意到文档中有一个defaultValue选项：

• defaultValue是字段将具有的初始值。 （默认值：null）

That default accepts multiple types of values, it is declared as:

该默认值接受多种类型的值，声明如下：

readonly defaultValue: boolean | number | string | Date;

So I tried to set it via index like defaultValue: 0 or via the key value like defaultValue: '(UTC+00:00) Coordinated Universal Time ETC/GMT', but it does not work, it still showing the options but is not selecting an option on load. So I try something different, I try to set it inside the options definition as:

因此，我尝试通过索引设置它，例如 defaultValue: 0 或通过键值设置它，例如 defaultValue: '(UTC+00:00) Coordinated Universal Time ETC/GMT'，但它不起作用，它仍然显示选项，但在加载时不选择任何选项。因此，我尝试了一些不同的方法，我尝试在options定义内设置它：

const timeZoneProp = new FormProp({
type: ePropType.Enum,
name: 'TimeZoneId',
displayName: '::TimeZone',
isExtra: true,
id: 'TimeZoneId',
autocomplete: 'off',
validators: () => [Validators.required],
options: data => {
const service = data.getInjected(TimeZoneService);
return service.getList().pipe(
map(response => {
const options = response.items?.map(item => ({
key: item.description,
value: item.id
})) || [];

    // Find the item where the key equals "(UTC+00:00) Coordinated Universal Time ETC/GMT"
    const defaultValueItem = options.find(
      item => item.key === '(UTC+00:00) Coordinated Universal Time ETC/GMT'
    );
    // If the defaultValueItem is found, assign its value to defaultValue
    if (defaultValueItem) {
      timeZoneProp.defaultValue = defaultValueItem.value;
    }
    return options;
  })
);

}
});

As you can see I'm trying to set in this line:

如您所见，我尝试在这一行中设置：

timeZoneProp.defaultValue = defaultValueItem.value;

But the property is read-only, so it can not be overridden in the options definition.

但是属性是只读的，因此不能在选项定义中重写它。

How can I achieve this?

我该如何实现这个？

UPDATE

I think the default value is not displayed because the options are being loaded asynchronously, and the default value is set before the options are available, how can I do a workaround to achieve this commitment?

我认为默认值没有显示是因为选项是异步加载的，并且在选项可用之前设置了默认值，如何解决这个问题以实现这一承诺？

I try to set defaultValue as a promise like:

我尝试将defaultValue设置为Promise，如下：

const timeZoneProp = new FormProp({
type: ePropType.Enum,
name: 'TimeZoneId',
displayName: '::TimeZone',
isExtra: true,
id: 'TimeZoneId',
autocomplete: 'off',
defaultValue: new Promise(resolve => {
const data = {};
const optionsPromise = this.options(data).toPromise();

  optionsPromise.then(options => {
    if (options.length > 0) {
      resolve(options[0].value);
    } else {
      resolve(null); // Set default value to null if options array is empty
    }
  });
}).then(
  resolvedValue =>
    resolvedValue as string | number | boolean | Date | undefined
),
validators: () => [Validators.required],
options: (data: PropData<IdentityUserDto>): Observable<Option<any>[]> => {
  const service = data.getInjected(TimeZoneService);
  return service
    .getList()
    .pipe(
      map(
        response =>
          response.items?.map(
            item =>
              ({ key: item.description, value: item.id } as Option<any>)
          ) || []
      )
    );
}

});

But this throws an error in defaultValue prop:

但是这在defaultValue属性中引发了错误：

Type 'Promise<string | number | boolean | Date | undefined>' is not assignable to type 'string | number | boolean | Date | undefined'.

类型 'Promise<string | number | boolean | Date | undefined>' 无法分配给类型 'string | number | boolean | Date | undefined'。

const optionsPromise = this.options(data).toPromise();

it throws:

它引发了以下错误：

this' implicitly has type 'any' because it does not have a type annotation.

因为它没有类型注释，所以“this”隐式具有类型“any”。

const timeZoneProp = new FormProp<IdentityUserDto>({
    type: ePropType.Enum,
    name: 'TimeZoneId',
    displayName: '::TimeZone',
    isExtra: true,
    id: 'TimeZoneId',
    autocomplete: 'off',
    validators: () => [Validators.required],
    options: (data: PropData<IdentityUserDto>): Observable<Option<any>[]> => {
      const service = data.getInjected(TimeZoneService);
      return service
        .getList()
        .pipe(
          map(
            response =>
              response.items?.map(
                item =>
                  ({ key: item.description, value: item.id } as Option<any>)
              ) || []
          )
        );
    }
  });
  propList.addByIndex(timeZoneProp, 6);

readonly defaultValue: boolean | number | string | Date;

const timeZoneProp = new FormProp<IdentityUserDto>({
  type: ePropType.Enum,
  name: 'TimeZoneId',
  displayName: '::TimeZone',
  isExtra: true,
  id: 'TimeZoneId',
  autocomplete: 'off',
  validators: () => [Validators.required],
  options: data => {
    const service = data.getInjected(TimeZoneService);
    return service.getList().pipe(
      map(response => {
        const options = response.items?.map(item => ({
          key: item.description,
          value: item.id
        })) || [];
        // Find the item where the key equals "(UTC+00:00) Coordinated Universal Time ETC/GMT"
        const defaultValueItem = options.find(
          item => item.key === '(UTC+00:00) Coordinated Universal Time ETC/GMT'
        );
        // If the defaultValueItem is found, assign its value to defaultValue
        if (defaultValueItem) {
          timeZoneProp.defaultValue = defaultValueItem.value;
        }
        return options;
      })
    );
  }
});

timeZoneProp.defaultValue = defaultValueItem.value;

const timeZoneProp = new FormProp<IdentityUserDto>({
    type: ePropType.Enum,
    name: 'TimeZoneId',
    displayName: '::TimeZone',
    isExtra: true,
    id: 'TimeZoneId',
    autocomplete: 'off',
    defaultValue: new Promise(resolve => {
      const data = {}; 
      const optionsPromise = this.options(data).toPromise();
      optionsPromise.then(options => {
        if (options.length > 0) {
          resolve(options[0].value);
        } else {
          resolve(null); // Set default value to null if options array is empty
        }
      });
    }).then(
      resolvedValue =>
        resolvedValue as string | number | boolean | Date | undefined
    ), // Cast the resolved value to the appropriate type
    validators: () => [Validators.required],
    options: (data: PropData<IdentityUserDto>): Observable<Option<any>[]> => {
      const service = data.getInjected(TimeZoneService);
      return service
        .getList()
        .pipe(
          map(
            response =>
              response.items?.map(
                item =>
                  ({ key: item.description, value: item.id } as Option<any>)
              ) || []
          )
        );
    }
  });

 const optionsPromise = this.options(data).toPromise();

答案1

得分: 1

默认值必须是一个值。这是一个承诺。默认值不支持动态值（暂时不支持）

你是否尝试将(UTC+00:00) 协调世界时 ETC/GMT作为默认值？

defaultValue: ''(UTC+00:00) 协调世界时 ETC/GMT'' 并将键和值设置为相同的值？也许在后端将键转换为值？