javascript - 没有ngFor的 Angular 2选择控件

Question

当创建一个选择控件时，带有可能从数据库中提取的选项，似乎习惯在模板端放置一个 ngFor 来呈现选项。

我想做的是在组件端有一个循环，用以下选项构建一个字符串:

for (var i = 0; i < 20; i++) {
    this.selectOptions += "<option value=" + i + ">" + i + "</option> ";
}

然后在像这样的模板端:

<select>
    {{selectOptions}}
</select>

我想这样做的原因是我在一个复杂的 UI 中有一些嵌套循环，以及几个具有相同选项的选择。呈现后选项不会改变。

我想摆脱所有正在运行的 ngFor 以尝试加速我的 UI。我还需要做其他事情，但我认为这是可以提供帮助的事情。然后选项的循环只需运行 1 次而不是一遍又一遍。

Answer 1

尝试使用 [innerHTML]连同 DomSanitizer :

https://stackblitz.com/edit/angular-kpkk4v?file=app%2Fapp.component.ts

组件:

export class AppComponent  {
  options = '<option value=1>1</option><option value=1>1</option>';
  optionsHTML: any;

  constructor(private sanitizer: DomSanitizer) {
    this.optionsHTML = this.sanitizer.bypassSecurityTrustHtml(this.options);
  }
}

模板:

<select [innerHTML]="optionsHTML"></select>

注意:

您需要清理 HTML 以便 Angular 渲染它，否则 Angular 将删除 HTML，您得到的只是一个字符串渲染 <select>11</select>