Компонент значка Angular активный элемент?

Question

Я попытался создать значок компонента:

@Component({
    selector: 'app-badge',
    templateUrl: './badge.component.html',
    styleUrls: ['./badge.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BadgeComponent implements OnInit {
    @Input() badge: Badge;
    @Input() cssClass: string;
    @Output() onSelect = new EventEmitter<Badge>();
    public isSelected: boolean;

    constructor() {}

    ngOnInit() {}

    public select() {
        this.onSelect.emit(this.badge);
        this.isSelected = !this.isSelected;
    }
}

Где-то мне нужно создать несколько встроенных значков для этого:

<app-badge
    *ngFor="let pagesize of [1,2,3]"
    [badge]="{ label: pagesize, value: pagesize }"
    (onSelect)="setPageSize($event)"
></app-badge>

Он отлично работает, как вы можете видеть у каждого значка есть свойство public isSelected: boolean;, это означает, что значок был нажат.

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

Answer 1

Вы можете сохранить выбранный значок в родительском компоненте:

public selectedBadgeIndex: number = null;

Следующее сохранение выбранного значка при нажатии:

<app-badge
    *ngFor="let pagesize of [1,2,3]; let i = index"
    [badge]="{ label: pagesize, value: pagesize }"
    (onSelect)="setPageSize($event, i)"
></app-badge>

В родительском компоненте:

public setPageSize(event, i): void {
   this.selectedBadgeIndex = i;
   // ...
}

Но вы не должны сохранять выбранное состояние в компоненте значка, сделайте isSelected как свойство Input:

export class BadgeComponent implements OnInit {
    // ...
    @Input()
    public isSelected: boolean = false;

И просто укажите состояние isSelected:

 <app-badge
     *ngFor="let pagesize of [1,2,3]; let i = index"
     [badge]="{ label: pagesize, value: pagesize }"
     [isSelected]="i === selectedBadgeIndex"
     (onSelect)="setPageSize($event, i)"
 ></app-badge>