Несколько переключателей на строку таблицы

Question

<table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th scope="col">Agenda No</th>
                        <th scope="col">Agenda Description</th>
                        <th scope="col">Opinion</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of agendaList">
                        <td>Agenda&nbsp;{{item.AGENDANO}}</td>
                        <td>{{item.AGENDA_DESC}}</td>
                        <td>
                            <div class="custom-control custom-radio">
                                <input type="radio" value="1" id="customRadio1" name="customRadio" class="custom-control-input">
                                <label class="custom-control-label" for="customRadio1">Yes</label>
                            </div>
                            <div class="custom-control custom-radio">
                                <input type="radio" value="0" id="customRadio2" name="customRadio" class="custom-control-input">
                                <label class="custom-control-label" for="customRadio2">No</label>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

У меня есть таблица из 3 значений. В каждом ряду будет 2 переключателя «да» или «нет». Как я могу выбрать один из них в каждом ряду индивидуально.

Средства:

1-й ряд -> "да", "нет" ---> я выберу да

2-й ряд -> "да", " нет "---> я выберу нет

3-я строка ->" да "," нет "---> я выберу да

Как я могу это сделать?

Answer 1

https://stackblitz.com/edit/angular-nwdean

Вам нужно изменить свои атрибуты имени. Сделайте их уникальными для каждой строки, например, вы можете написать как name="customRadio{{item.AGENDANO}}" и создать еще один атрибут, чтобы связать ваш ответ с вашей моделью. Я создал пример демонстрации stackblitz для u

<table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th scope="col">Agenda No</th>
                        <th scope="col">Agenda Description</th>
                        <th scope="col">Opinion</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of agendaList">
                        <td>Agenda&nbsp;{{item.AGENDANO}}</td>
                        <td>{{item.AGENDA_DESC}}</td>
                        <td>
                            <div class="custom-control custom-radio">
                                <input type="radio" value="1" id="customRadio{{item.AGENDANO}}" name="customRadio{{item.AGENDANO}}" class="custom-control-input">
                                <label class="custom-control-label" for="customRadio{{item.AGENDANO}}">Yes</label>
                            </div>
                            <div class="custom-control custom-radio">
                                <input type="radio" value="0" id="customRadio2" name="customRadio{{item.AGENDANO}}" class="custom-control-input">
                                <label class="custom-control-label" for="customRadio{{item.AGENDANO}}">No</label>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

Answer 2

делайте так.

<table class="table table-hover table-bordered">
  <thead>
      <tr>
          <th scope="col">Agenda No</th>
          <th scope="col">Agenda Description</th>
          <th scope="col">Opinion</th>
      </tr>
  </thead>
  <tbody>
      <tr *ngFor="let item of agendaList">
          <td>Agenda&nbsp;{{item.AGENDANO}}</td>
          <td>{{item.AGENDA_DESC}}</td>
          <td>
              <div class="custom-control custom-radio">
                  <input type="radio" value="1" id="{{item.AGENDANO}}" name="{{item.AGENDANO}}" class="custom-control-input">
                  <label class="custom-control-label" for="{{item.AGENDANO}}">Yes</label>
              </div>
              <div class="custom-control custom-radio">
                  <input type="radio" value="0" id="{{item.AGENDANO}}" name="{{item.AGENDANO}}" class="custom-control-input">
                  <label class="custom-control-label" for="{{item.AGENDANO}}">No</label>
              </div>
          </td>
      </tr>
  </tbody>
</table>

ознакомьтесь рабочая демоверсия

Дайте мне знать, если у вас есть какие-либо сомнения.

обновлено прикреплен скриншот