在Angular 8中动态创建单选按钮名称(Typescript、HTML、SCSS)

Question

我在动态创建单选按钮名称时遇到了一些挑战。如何动态生成单选按钮名称。这是我的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"。我想为单选按钮生成一个动态分配的名称

Answer 1

您可以尝试在html中使用for循环，并将单选按钮代码放入其中，然后让您的单选按钮标记如下：

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

Answer 2

注意:如果您将单独的名称传递给每个单选按钮，那么您将能够选择多个单选选项。如果将相同的名称传递给多个单选按钮，则只能选择一个单选按钮。

如何传递动态名称？

如果<radio-button>是一个单独的组件。然后您可以将名称作为属性传递给组件，如下所示。

<radio-button name="radio-1"></radio-button>

然后，在您的radio-button组件中，您可以使用@Input装饰器接受即将到来的属性。

@Input name: string;

现在你可以把这个变量传递给你的组件html。

<input type="radio" #radio [id]="inputId" [name]="name" />

如果要将变量传递给属性，则需要使用[]进行单向绑定。

请参阅此处的示例。https://stackblitz.com/edit/angular-dynamic-radio-name