Angular 2中的动态表单下拉菜单

Question

我有一个动态形式的下拉菜单，但是我看不到它的选项，我在动态字段组件中有这个下拉列表：

  <div *ngSwitchCase="'dropdown'" class="form-group">
    <label [htmlFor]="field.key">{{ field.label }}</label>
    <select [id]="field.key"
            [formControlName]="field.key">
      <option value="">{{field.options}}</option>
      <option *ngFor="let opt of field.options"
              [value]="opt.key">
        {{opt.value}}
      </option>
    </select>
  </div>

这在我的书本详细信息组件中：

authorsDropdown = new DropdownField();
categoriesDropdown = new DropdownField();

bookDefinition: Array<FieldDefinition> = [
{
  key: 'bookId',
  type: 'number',
  isId: true,
  label: 'BookId',
  required: true
},
{
  key: 'title',
  type: 'string',
  isId: false,
  label: 'Title',
  required: true
},
{
  key: 'authorsDropdown',
  type: 'dropdown',
  isId: false,
  label: 'Authors',
  required: false
},
{
  key: 'categoriesDropdown',
  type: 'dropdown',
  isId: false,
  label: 'Categories',
  required: false
}
];

ngOnInit(): void {

this.operation = this.route.snapshot.params['operation'];

this.authorService.getAuthors()
  .subscribe((authors: IAuthor[]) => {
    this.authors = authors,
      authors.forEach((author) => {
        this.authorsDropdown.options.push({ key: author.authorId, value: author.authorName });
      });
  });

this.categoryService.getCategories()
  .subscribe((categories: ICategory[]) => {
    this.categories = categories,
      categories.forEach((categ) => {
      this.categoriesDropdown.options.push({ key: categ.categoryId, value: categ.categoryName });
  }); });

if (this.operation === 'create') {
  this.book = {
    bookId: 0, title: '',
    authorsDropdown: new DropdownField({
      key: 'authorsDropdown',
      label: 'Authors',
      options: this.authorsDropdown.options,
      type: 'dropdown',
      isId: false,
      required: false
    }),
    categoriesDropdown: new DropdownField({
      key: 'categoriesDropdown',
      label: 'Categories',
      options: this.categoriesDropdown.options,
      type: 'dropdown',
      isId: false,
      required: false
    })
  };
  console.log(this.book);
} else {
  this.bookService.getBook(this.route.snapshot.params['id'])
    .subscribe((book: Book) => { this.book = book });
}
}

我的DropdownField定义如下：

  import { FieldDefinition } from './field-definition'; 
  export class DropdownField extends FieldDefinition {
     type: 'dropdown';
     options: { key: number, value: string }[] = [];
     constructor(options: {} = {}) {
     super();
     this.options = options['options'] || [];
    }
   }      

authorsDropdown和categoryDropdown已正确填充，它们具有键和值数据。我只是在下拉菜单中看不到它们，我想念什么？谢谢！