angular - Angular 8 动态表单 - 从回调中加载“选择”选项

Question

我有一个名为 的服务userService，它有一个名为 的方法getUserFields()。Field它返回将在 my 中呈现的对象数组newUserComponent。对于select元素，我使用一个options键设置选项。但是，在这种情况下，对于包含角色列表的选择元素，我需要通过调用getUserRoles().rolesService

如何在我的动态表单工作流中实现使用服务的回调？

用户服务.ts

import { Injectable } from '@angular/core';
import { Field } from '../../shared/models/field';

@Injectable({
    providedIn: 'root'
})
export class UserService {

    constructor() {}

    async getUserFields() {
        return [{
                type: 'text',
                label: 'Username',
                name: 'username',
                required: true,
            },
            {
                type: 'text',
                label: 'Surname',
                name: 'surname',
                required: true,
            },
            {
                type: 'select',
                label: 'Role',
                name: 'role',
                required: true,
                options: () => {
                    // call rolesService.getUserRoles()
                },
            },
            // etc...
        ];
    }
}

新用户组件.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from 'projects/recobros/src/app/core/services/user.service';
import { Field } from 'projects/recobros/src/app/shared/models/field';

// The `app-dynamic-field` component renders the field.
@Component({
  selector: 'app-new-user',
  template: `
    <form ngNativeValidate (ngSubmit)="createNewUser($event.target)">
        <ng-container *ngFor="let field of userFields | async">
            <app-dynamic-field [field]="field"></app-dynamic-field>
        </ng-container>
        <br>
        <button mat-raised-button color="primary">Crear usuario</button>
    </form>
  `,
  styleUrls: ['./new-user.component.scss'],
})
export class NewUserComponent implements OnInit {
  userFields: Promise<Field[]>;
  constructor() {}

  ngOnInit(): void {
    this.userFields = this.userService.getUserFields();
  }

  createNewUser(form) {
    // create user...
  }
}

标签： angulartypescriptforms