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

Question

我有一个服务叫 userService的方法，它有一个叫做 getUserFields(). 它返回一个由 Field 对象，将在我的 newUserComponent. 对于 select 元素，我使用 options 键。然而，在这种情况下，对于一个包含角色列表的select元素，我需要通过调用方法 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...
        ];
    }
}

newUserComponent.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...
  }
}