Использование ng-select с ngx-formly в Angular 11

Я пытаюсь использовать ng-select и ngx-formly в Angular 11. Я следил за руководствами, предоставленными в официальной документации. 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'],
 }]
})]

typescript angular angular-forms angular-ngselect ngx-formly
person Prathvi Shetty    schedule 16.02.2021    source источник
comment
В случае угловых или других вопросов по javascript. Добавление проблемы на stackblitz.com всегда будет привлекать людей, чтобы они давали ответы, поскольку они могут выполнять отладку напрямую.   -  person abrarfahim    schedule 16.02.2021
comment
Вы импортировали компонент NgSelectFormlyComponent в свой модуль?   -  person L Johnson    schedule 17.02.2021
comment
@LJohnson да, я импортировал NgSelectFormlyComponent в свой модуль   -  person Prathvi Shetty    schedule 17.02.2021

Ответы (1)


arrow_upward
0
arrow_downward

В моем случае мне пришлось связать параметры: Observable с переменной компонента и вызвать эту переменную из шаблона, чтобы загрузить параметры с помощью канала Async.

Я также добавил загруженное состояние для рендеринга HTML после назначения наблюдаемого

Каким-то образом компилятор не смог обнаружить свой T [] | Наблюдается как типы данных формальных опций;

Образец:

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>
person Nirmal Krishna    schedule 17.06.2021