在Angular 11中使用ng-select和ngx-formly

Question

我正在尝试在Angular 11中使用ng-select和ngx-formly，我一直在遵循官方文档提供的教程。https://egghead.io/lessons/angular-use-3rd-party-form-controls-with-angular-formly

我当前的实现给了我以下错误：

​

如果我能得到帮助，弄清楚我的代码是否出错，或者我是否遗漏了任何步骤，那就太好了。

下面是我的实现：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { FieldType } from '@ngx-formly/core';

@Component({
    selector: 'formly-ng-select',
    template: `<div class="mat-input-infix mat-form-field-infix">
    <ng-select
       [items]= "(to.options|formlySelectOptions:field|async)!"
       [placeholder]="to.label || 'placeholder'"
       [bindValue]="to.bindValue || 'value'"
       [formControl]="formControl">
    </ng-select>
  </div>`
})
export class NgSelectFormlyComponent extends FieldType {
  formControl!: FormControl;}

我在我的主组件中使用了上面的自定义模板，如下所示：

fields: FormlyFieldConfig[] = [
 {
    key: 'nationId',
    type: 'my-autocomplete',
    // type: 'select',
    templateOptions: {
      label: 'Nation',
      options: this.dataService.getNations()
    }
  }]; 

我还在app.module中添加了它，如下所示：

FormlyModule.forRoot({
 types: [{
   name: 'my-autocomplete',
   component: NgSelectFormlyComponent,
    // wrappers: ['form-field'],
 }]
})]

Answer 1

在我的例子中，我必须将options: Observable引用到一个组件变量，并从模板中调用该变量以使用异步管道加载选项。

我还添加了一个已加载状态，以便在分配了observable之后呈现HTML

不知何故，编译器不能将其T[] | Observable检测为formly选项的数据类型；

示例：

export class ComponentName extends FieldType implements OnInit {
    options$: any;
    loaded = false;

    constructor() {
        super();
    }

    ngOnInit() {
        this.options$ = this.to.options;
        this.loaded = true;
    }

}

组件模板：

<ng-select ..>
    <ng-option *ngFor="let option of options$ | async">...</ng- 
    option>
</ng-select>