Javascript 无ngFor的角度2选择控制_Javascript_Angular_Optimization

Javascript 无ngFor的角度2选择控制

javascript angular optimization

Javascript 无ngFor的角度2选择控制,javascript,angular,optimization,Javascript,Angular,Optimization,当创建一个select控件时，使用可以从数据库中提取的选项，通常会在模板端放置一个ngFor来呈现选项我想做的是在组件端创建一个循环，该循环使用以下选项构建字符串： for (var i = 0; i < 20; i++) { this.selectOptions += "<option value=" + i + ">" + i + "</option> "; } 然后在类似以下内容的模板端： <select> {{selectOp

当创建一个select控件时，使用可以从数据库中提取的选项，通常会在模板端放置一个ngFor来呈现选项

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

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

然后在类似以下内容的模板端：

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

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

我之所以要这样做，是因为我在一个复杂的UI中有一些嵌套的循环，以及几个具有相同选项的选择。渲染后，选项不会更改

我想摆脱所有正在运行的NGFOR，以加速我的UI。我还需要做其他一些事情，但我认为这会有所帮助。然后，选项的循环只需运行一次，而不是反复运行。

未经测试，但我认为您可以像这样使用innerHTML：

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

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

未经测试，但我认为您可以像这样使用innerHTML：

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

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

如图所示，似乎

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

。。这就是你要找的。据说它目前在5.0.2版中也能工作，如图所示

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

。。这就是你要找的。据说它目前在5.0.2版中也能工作，请尝试使用[innerHTML]和DomSanitarizer：

组成部分：

模板：

注:

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

尝试使用[innerHTML]和Domsanizer：

组成部分：

模板：

注:

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

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

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

为什么呢？因为当您使用[innerHTML]时，实际上只创建了一个字符串，它与Angular没有任何关系。此外，阅读代码将变得很困难，因为您必须从HTML切换到TS才能看到自己在做什么

解决方案你说你有几个复杂的循环，一旦设置好，选项就不应该移动了？这是完美的角度

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

@组成部分{ 选择器：“应用程序我的选择”，模板：` {{option}} `, 样式URL:['./my select.scss'] } 导出类MySelectComponent实现OnInit{ @输入选项：任意[]； @输出更改：EventEmitter=新的EventEmitter；我的选择：任何；构造函数{} 恩戈尼特{ log'options是'+this.options； this.mySelect=this.options[0]； } } 现在，在其他组件中，您只需

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

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

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

解决方案你说你有几个复杂的循环，一旦设置好，选项就不应该移动了？这是完美的角度

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

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

太棒了。看一看你在4分钟内收到的同一个答案：这在4分钟内有效吗？使用上面的代码构建选项和[innerHTML]=selectOptions当我检查元素时，这就是它显示的内容：0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19查看我的更新答案如此棒。看一看你在4分钟内收到的同一个答案：这在4分钟内有效吗？使用上述代码构建选项和[innerHTML]=当我检查元素时选择选项这是它显示的内容：0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19查看我的更新答案请查看我OP下面的上面的命令，这是否在Angular 4中工作？请查看我OP下面的上面的命令，这在Angular 4中有效吗？令人惊讶的是，做这么简单的事情需要一些复杂的事情：Angular有时会使事情过于复杂，然而，在本例中，angular提供了一个额外的安全措施，以避免html/脚本注入。令人惊讶的是，要完成如此简单的事情，需要做一些复杂的事情：angular有时会过度复杂然而，在本例中，它是angular的一个额外安全措施，以避免html/脚本注入。