Question

A有一个Angular组件，代表<select>的问题，可以选择其中一个可能的答案。

我想根据应用程序网址参数将其中一个选项设置为selected状态。

此外，问题组件是通过组件工厂动态生成的。

以下是我尝试使用selected ng-selected设置question.component.html的地方：

  <select>
    <option>Choose...</option>
    <ng-template ngFor let-option [ngForOf]="data.options">
      <option value="{{option.value}}" ng-selected="option.value === urlAnswer">
        {{option.text}}
      </option>
    </ng-template>
  </select>

以下是question.component.ts代码的重要部分

export class QuestionComponent {
  @Input() data: any;
  @Input() urlAnswer: any;
}

在我从服务获得poll结构后，我在这里创建了父组件（poll.component.ts）中的组件：

this.pollSubscription = this.pollService.pollLoaded.subscribe((dataFromServer: any) => {
  const viewContainerRef = this.elementsHost.viewContainerRef;
  viewContainerRef.clear();
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(QuestionComponent);
  const componentRef = viewContainerRef.createComponent(componentFactory);
  (<QuestionComponent>componentRef.instance).data = dataFromServer.questionData;
  (<QuestionComponent>componentRef.instance).urlAnswer = this.answerFromRouterParams;
});

一切都很好，除了ng选择的东西，我不明白为什么。有什么需要在这里解决的想法吗？

Answer 1

试试这个：

<option value="{{option.value}}" [selected]="option.value === urlAnswer">
    {{option.text}}
</option>

如何在Angular组件中设置选项的选定标志？

1 个答案: