在Angular中，我们可以使用异步验证器来检查表单字段的有效性。但是，当我们尝试在UI中显示异步验证器的错误消息时，可能会遇到一些问题。下面是一个解决这个问题的示例代码：

在组件类中，我们可以定义一个异步验证器，并将其应用于表单字段：

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-example',
  template: `
    

      
      

        {{ myForm.get('myField').errors?.asyncError }}
      
    
  `,
})
export class ExampleComponent {
  myForm = new FormGroup({
    myField: new FormControl('', null, this.asyncValidator),
  });

  asyncValidator(control: FormControl) {
    return new Promise((resolve) => {
      // Simulating an async validation
      setTimeout(() => {
        if (control.value === 'invalid') {
          resolve({ asyncError: 'Invalid value' });
        } else {
          resolve(null);
        }
      }, 2000);
    });
  }
}

在上面的示例中，我们首先导入了FormControl和Validators类。然后，我们在组件类中创建了一个myForm表单组，并为myField字段添加了一个异步验证器asyncValidator。

在模板中，我们将表单字段和错误消息绑定到myForm.get('myField').errors?.asyncError。在这里，我们使用了Angular的*ngIf指令来检查表单字段的错误对象中是否存在asyncError属性，如果存在，就显示相应的错误消息。

请注意，由于异步验证器是异步执行的，所以我们需要使用Promise来处理异步操作。在上面的示例中，我们使用setTimeout来模拟异步验证过程。

希望这个示例能帮助你解决在UI中显示异步验证器错误的问题。