Question

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

我想要做的是在组件端有一个循环，它使用选项构建一个字符串：

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

然后在这样的模板方面：

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

我想要这样做的原因是我在复杂的UI中有一些嵌套循环，并且有几个选择具有相同的选项。一旦渲染，选项就不会改变。

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

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将删除HTML，你得到的只是一个字符串呈现<select>11</select>

Answer 2

未经测试，但我认为你可以像这样使用pip install http://intranet.url/mypackage-1.0.4.zip：

innerHTML

Answer 3

如图所示here似乎

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

..是你正在寻找的。据说它目前在版本<select [innerHTML]="selectOptions"></select>

中工作

Answer 4

每个人都在告诉您使用[innerHTML]属性：他们错了。

你并没有走正确的道路：你应该在HTML中使用迭代，而不是在组件的逻辑中。

为什么？

因为当您使用[innerHTML]时，实际上只会创建一个字符串，它与Angular 无任何关联。此外，阅读代码将变得困难，因为您必须从HTML切换到TS以查看您正在执行的操作。

解决方案

你说你有几个复杂的循环，一旦设置，选项不应该移动？这对Angular来说是完美的！

您可以创建一个新组件来处理您的选择：

@Component({
  selector: 'app-my-select',
  template: `
  <select [(ngModel)]="mySelect" (change)="change.emit(mySelect)" *ngIf="options">
  <option *ngFor="let option of options" [value]="option">{{ option }}</option>
  </select>
  `,
  styleUrls: ['./my-select.scss']
})
export class MySelectComponent implements OnInit {

  @Input() options: any[];
  @Output() change: EventEmitter<any> = new EventEmitter();

  mySelect: any; 

  constructor() {}

  ngOnInit() {
    console.log('options are ' + this.options);
    this.mySelect = this.options[0];
  }
}

现在，在您的其他组件中，您只需执行

即可

<app-my-select [options]="yourOptions" (change)="doSomething($event)"></app-my-select>

角度2选择控制没有ngFor

4 个答案:

为什么？

解决方案