Angular 4 动态表单：编辑下拉菜单不起作用

Question

我正在创建一个 Angular 4 动态多步骤表单。表单的最后一步向用户显示他们输入的所有值，并让他们有机会进行编辑。当用户点击“编辑”时，它会将他们带回到那个特定的问题。

编辑适用于输入和复选框，但不适用于下拉菜单。它将专注于该元素，但不显示用户最初选择的值。

我有一个example。

我需要对下拉菜单做些不同的事情吗？

谢谢

Answer 1

您应该避免使用this.renderer2.selectRootElement 方法，因为它会清除所选元素的内容：

selectRootElement(selectorOrNode: string|any): any {
    let el: any = typeof selectorOrNode === 'string' ? 
            document.querySelector(selectorOrNode) :
            selectorOrNode;
    if (!el) {
      throw new Error(`The selector "${selectorOrNode}" did not match any elements`);
    }
    el.textContent = ''; <==================== this code
    return el;
}

https://github.com/angular/angular/blob/c8a1a14b87e5907458e8e87021e47f9796cb3257/packages/platform-browser/src/dom/dom_renderer.ts#L137-L145

处理自动对焦的一个选项是将focusedKey 传递给动态表单：

<dynamic-control [input]="control" [form]="form" [focusedKey]="focusedKey">
                                                   ^^^^^^^^^^^^^^^^^^^^^^^

然后您可以创建自动对焦指令，例如：

@Directive({
  selector: '[autofocus]'
})
export class AutofocusDirective {
  constructor(private el: ElementRef) {}

  @Input() set autofocus(value) {
    if (value) {
      this.el.nativeElement.focus();
    }
  }
}

并使用它来代替 id 和 ChangeDetectorRef

<select [autofocus]="focusedKey === input.key"

Fixed Example