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

Question

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

我想将选项之一设置为 selected基于应用程序 URL 参数的状态。

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

这是我尝试设置 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.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-selected 之外，一切正常，我不明白为什么。有什么想法需要在这里修复吗？

Answer 1

试试这个:

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