时间戳

首页 > 解决方案 > 在 Angular 8（Typescript、HTML、SCSS）中动态创建单选按钮名称

html - 在 Angular 8（Typescript、HTML、SCSS）中动态创建单选按钮名称

问题描述

我在动态创建单选按钮名称时遇到了一些挑战。如何动态生成单选按钮名称。这是我的html代码

<table>
    <td>
        <input type="radio" #radio [id]="inputId" name="radio" />
        <label [for]="inputId">
        <ng-content></ng-content>
        </label>
    </td>
    <br />
    <br />
</table>

我也像这样将一个字符串传递给单选按钮组件

<radio-button>
    <b>Radio Button 1</b>
</radio-button>
<radio-button>
    <b>Radio Button 2</b>
</radio-button>
<radio-button>
    <b>Radio Button 3</b>
</radio-button>
<radio-button>
    <b>Radio Button 4</b>
</radio-button>

我的name属性被硬编码到像name="radio". 我想为单选按钮生成一个动态分配的名称

标签： htmlangulartypescriptscss-lint

解决方案

您可以在 html 中尝试一个 for 循环，并将单选按钮代码放入其中，并让您的单选按钮标记如下所示：

<input type="radio" name="rbtn[{{i}}]" [attr.name]="i" [value]="" />

推荐阅读