绑定角度形式选择选项不起作用答案

【问题标题】：Binding angular formly select option not work绑定角度形式选择选项不起作用
【发布时间】：2020-09-10 09:18:56
【问题描述】：

我正在尝试使用此代码正式绑定选择类型选项：

      fieldGroup: [
    {
      key: 'TimeOffTypeID',
      type: 'select',
      className: 'flex-40 padding-10',
      templateOptions: {
        label: 'نوع مرخصی',
        placeholder: 'نوع مرخصی',
        required: true,
        options: this.getTimeoffType,
        valueProp: 'TimeOffTypeID',
        labelProp: 'TimeOffTypeName',
      },

和

    types$: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);
     
    public get getTimeoffType(): Observable<any[]> {

    return this.types$.asObservable();
    }

和数据服务

      getTimeoffTypes() {

this.base
  .get(
    Controller.TIMEOFFTYPE,
    {
      TimeOffTypeID: 0,
    },
    Actions.SEARCH
  )
  .subscribe(({ result }) => {
    console.log(result)
    this.types$.next(result);
    
  })

}

结果有我的数据，但是这个数据没有绑定到表单选择选项

【问题讨论】：

标签： angular typescript behaviorsubject angular-formly

【解决方案1】：

试试这样的：

app.service.ts

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class TypeService {
    private types$ = new Subject<any>();

    sendTypes(type: any) {
        this.types$.next({ data: type });
    }

    clearTypes() {
        this.types$.next();
    }

    getTypes(): Observable<any[]> {
        return this.types$.asObservable();
    }
}

app.component.ts

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

import { TypeService } from './_services/index';

@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent implements OnDestroy {
    types: any[] = [];
    subscription: Subscription;

    constructor(private typeService: TypeService) {
        // subscribe to home component messages
        this.subscription = this.typeService.getTypes().subscribe( type => {
          if (type) {
            this.types.push(type);
          } else {
            // clear messages when empty message received
            this.type = [];
          }
        });
    }

    ngOnDestroy() {
        // unsubscribe to ensure no memory leaks
        this.subscription.unsubscribe();
    }
}

【讨论】：

【解决方案2】：

我遇到了同样的问题，没有显示选项。下面突出显示的代码有助于解决它；模板选项：{ 标签：“性别。”， labelProp : "名称", valueProp : "价值", 选项： [ { “姓名”：“男性”， “价值”：“男性” }, { “姓名”：“女性”， “价值”：“女性” }, { “名称”：“其他”， “价值”：“其他” } ], 注意：我使用的是 Formly Material

【讨论】：