выберите только один в каждом ряду

Question

У меня есть пять строк с двумя флажками, каждый из которых создан с помощью al oop и использует привязку свойства с функцией click. В настоящее время, когда я щелкаю по одному элементу, все элементы в столбце также выбираются, но я хочу добиться этого в строке. Есть ли способ добиться этого?

my component.ts

import { Component, OnInit } from '@angular/core';

enum CheckBoxType { APPLY_FOR_JOB, MODIFY_A_JOB, NONE };
@Component({
  selector: 'app-select-fav',
  templateUrl: './select-fav.component.html',
  styleUrls: ['./select-fav.component.css']
})
export class SelectFavComponent implements OnInit {
  public fruits = ["apple", "straw berry","orange","plum","grapes"]

  check_box_type = CheckBoxType;

  currentlyChecked: CheckBoxType;

  selectCheckBox(targetType: CheckBoxType) {
    // If the checkbox was already checked, clear the currentlyChecked variable
    if(this.currentlyChecked === targetType) {
      this.currentlyChecked = CheckBoxType.NONE;
      return;
    }

    this.currentlyChecked = targetType;
  }

} 

мой компонент. html

<button>Like All</button>
<div *ngFor="let item of fruits;  let i = index">
    <p>{‌{item}}</p>
    Like: <input type="checkbox" name="test" 
    [checked]="currentlyChecked === check_box_type.APPLY_FOR_JOB" 
    (click)="selectCheckBox(check_box_type.APPLY_FOR_JOB)">

    Dislike : <input type="checkbox" name="test"
    [checked]="currentlyChecked === check_box_type.MODIFY_A_JOB" 
    (click)="selectCheckBox(check_box_type.MODIFY_A_JOB)">
    <hr>
</div>

PS: когда я нажимаю на кнопку в столбце должны быть отмечены все подобные флажки.

Answer 1

Часть вашей проблемы заключается в том, что вы пытаетесь отследить 1: многие из ваших текущих логи c. Для этих целей лучше структурировать ваши данные, чтобы получить свойства для каждого объекта (плода). Затем вы можете использовать [(ngModel)], чтобы связать все.

Пример Stackblitz

TypeScript

import { Component, OnInit } from '@angular/core';
enum CheckBoxType { LIKEME, DISLIKE, NONE };
@Component({
  selector: 'app-select-one',
  templateUrl: './select-one.component.html',
  styleUrls: ['./select-one.component.css']
})
export class SelectOneComponent implements OnInit {
  public fruits = ["apple", "straw berry","orange","plum","grapes"].map( f => ({ name: f, like: false, dislike: false }));
  check_box_type = CheckBoxType;

  currentlyChecked: CheckBoxType;
  constructor() { }

  ngOnInit() {}

  selectAllLike(){
     this.fruits.forEach( f => {
       f.like = true;
       f.dislike = false;
     })
  }
}

HTML

<button (click)="selectAllLike()" >Like All</button>
<div *ngFor="let item of fruits;  let i = index">
    <p>{{item | json}}</p>
    Like: <input type="checkbox" name="test" [(ngModel)]="item.like" [disabled]="item.dislike">

Dislike : <input type="checkbox" name="test" [(ngModel)]="item.dislike" [disabled]="item.like">
    <hr>
</div>

В качестве примечания я бы использовал Angular Материал MatTable для таблиц. Это намного чище и более полнофункционально.

https://material.angular.io/components/table/overview

Вот версия, использующая функцию для переключения различных состояний:

https://stackblitz.com/edit/angular-pwhxhd?file=src%2Fapp%2Fselect-one%2Fselect-one.component.html