Angular 8: Как получить выбранные данные из радиокнопки Dynami c

Question

Как получить данные из радиокнопки Dynami c (радиокнопка генерируется из данных json). Переключатель успешно отображается, но как я могу получить выбранные данные из динамической кнопки c.

Пример Json Данные:

[{Key : color,Values : [{Value : red}]}]

product.component.ts

   <div class="form-group product__option" *ngFor="let item of product.productAttr; let i = index">
                    <label class="product__option-label">{{item.key}}</label>
                    <div class="input-radio-label">
                        <div class="input-radio-label__list">
                            <label *ngFor="let value of item.values; let i = index">
                                <input type="radio" id="{{value.key}}" value="{{value.value}}" name="{{item.key}}" (change)="onItemChange($event)">
                                <span>{{value.value}}</span>
                            </label>
                            
                        </div>
                    </div>
                </div>

Answer 1

Вам необходимо реализовать метод onItemChange в файле product.component.ts .

onItemChange(value){
   console.log(value);
}

Answer 2

Вам необходимо использовать (изменить) событие для динамически создаваемой радиокнопки, а затем вы можете передать ей значения и затем использовать их в файле ts.

например.

HTML

 <input class="option" type="radio" value="{{optionsVal.id}}" 
                      id="opt_{{optionsVal.id}}" name="quizOption"
                      (change)="radioFun( optionsVal.id)"
                       />

TS

 radioFun(optionID: any) {
console.log(optionID)
}

Так что вы также можете сохранять и извлекать значения sh в любой конкретный массив, когда вы будете sh на функцию радиоFun.

Answer 3

Вам необходимо реализовать метод onItemChange в вашем файле component.ts.

onItemChange(itemKey, itemValue) { console.log(itemKey + ' ' + itemValue); }

ref: https://stackblitz.com/edit/angular-ipm7s6?file=src%2Fapp%2Fapp.component.ts