Угловой 12 вложенных ngFor с динамическим идентификатором, присваиваемым входному типу=»радио» HTML-элементу

#angular #dynamic #nested #ngfor

Вопрос:

У меня есть следующий код:

 <div *ngIf="maccInfo.containers.length > 0">
  <div *ngFor="let container of maccInfo.containers; let i = index">
    blablabla code
    <div *ngFor="let position of container.positions; let j = index">
      <input id="{{ 'position-'   i   j }}" type="radio" [value]="position" formControlName="maccs">
      <label for="{{ 'position-'   i   j }}">{{position.name}}
    </div>
  </div>
</div>
 

Это дает мне именно то, что я ожидаю в U, но когда я выбираю один из результатов, а затем пытаюсь выбрать другой, первый не снимается.

Как вы можете себе представить, я ожидаю, что пользователь сможет выбрать один из результатов и получить его в конце.

Я предполагаю, что я делаю что-то не так с динамическим идентификатором, а затем использую его в метке для

есть какие-нибудь предложения ?

Редактировать

Решение для этого заключается в том, что каждая группа переключателей должна иметь одно и то же имя(Он должен быть статичным), он похож на индикатор.

Код, вырезанный из другого примера:

     <div class="col-xxl-12 m-4" *ngFor="let crypto of cryptos; let i = index">
  <div class="card">
    <div class="card header">
      {{ crypto.name }}
    </div>
    <div
      class="card-body"
      *ngFor="let asset of crypto.positions; let j = index"
    >
      <label>
        <input
          id="asset{{ i }}{{ j }}"
          [value]="asset.value"
          name="testname"
          type="radio"
        />
        <i class="m-1">{{ asset.assetName }}</i>
      </label>
    </div>
  </div>
</div>
 

Комментарии:

1. Тип=»радио» нужно «одно и то же имя» для каждой группы, вы можете использовать что-то подобное <input type="radio"... [name]="'rd' i"> -каждая строка «я» имеет одно и то же имя для всех переключателей-