Как я могу сделать только один флажок, выбранный за раз в данном списке в ngFor в угловых 5?

Question

Я хочу сделать только один флажок, выбранный одновременно в ngFor в angular 5. у меня есть следующий код ниже.

<div class="form-check" style="margin-top:0;">
   <label class="form-check-label">
    <input class="form-check-input"  id="res{{restaurant._id}}" (change)="selectRestaurant(restaurant,i)" [checked]="restaurant.checked" type="checkbox">
        <span class="form-check-sign"></span>
    </label>
</div>

А в моем компоненте

selectRestaurant(restaurant: any, i: any) {
    if (restaurant) {
      restaurant.checked = !restaurant.checked;
    }
  }

То есть какое-либо возможное решение только для одного флажка, выбранного в данном списке?

Answer 1

Я видел много примеров с использованием цикла. Но я думаю, что это плохая идея, когда флажков слишком много. Я рекомендую использовать другой способ.

Создать переменную, которая будет содержать индекс флажка.

public checkboxIndex = 0; //default value for checking
public checkboxModel = [];

ngOnInit() {
 for (let i = 0; i < checkboxCount.length; i++) {
 this.checkboxModel.push({ name: `${i}`, enabled: false });
}

public checkboxChange(index) {
    if (this.checkboxIndex !== index) {
      this.checkboxModel[this.checkboxIndex].enabled = false;
    }
    this.checkboxIndex = index;
  }

//HTML
<div *ngFor="let checkbox of checkboxCount.length; let i = index">
 <input type="checkbox" [(ngModel)]="checkboxModel[i].enabled" 
 name="checkboxModel[i].name"
                (change)="checkboxChange(i)"> </input>
</div>

Это должно помочь. Пожалуйста, поправьте меня, если я сделал несколько ошибок.

Answer 2

Вы должны привязать элемент-флажок с помощью ngmodel к конкретному экземпляру цикла for. Это вы можете попробовать с ReactiveForms. См. Один пример https://stackblitz.com/angular/ayqnbvbkmpy