Динамическое создание имени переключателя в Angular 8 (Typescript, HTML, S CSS) - PullRequest
Новая
       52

Динамическое создание имени переключателя в Angular 8 (Typescript, HTML, S CSS)

1 голос
/ 25 февраля 2020

У меня проблемы с созданием имени переключателя Динамически. Как я могу динамически генерировать имя переключателя. Вот мой html код 

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

Я также передаю строку в компонент Radio Buttton следующим образом: 

<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". Я хочу сгенерировать динамически назначенные имена для переключателя

Ответы [ 2 ]

1 голос
/ 25 февраля 2020

Вы можете попробовать для l oop внутри вашего html и поместить код радиокнопки в него, и ваша метка радиокнопки будет выглядеть примерно так: 

<input type="radio" name="rbtn[{{i}}]" [attr.name]="i" [value]="" />
0 голосов
/ 25 февраля 2020

Примечание. Если вы передадите отдельное имя каждой радиокнопке, вы сможете выбрать несколько опций радио. Если вы передадите одно и то же имя нескольким переключателям, вы сможете выбрать только один переключатель.

Как передать имя Dynami c?

Если <radio-button> это отдельный компонент. затем вы можете передать имя в качестве атрибута компоненту следующим образом. 

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

, затем в вашем компоненте radio-button вы можете принять атрибут прихода с помощью @Input decorator. 

@Input name: string;

Теперь вы можете передать эту переменную вашему компоненту html. 

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

Если вы хотите передать переменную в атрибут, вам нужно использовать [] для односторонней привязки.

Смотрите пример здесь. https://stackblitz.com/edit/angular-dynamic-radio-name

...