Невозможно выбрать переключатель в Angular нажатием

Question

У меня очень простой код, но он не позволяет мне проверить опцию All, Как я могу это исправить?

Воспроизводимая демонстрация -> https://stackblitz.com/edit/angular-tbanxq?file=src%2Fapp%2Fhello.component.ts

import { Component, Input } from "@angular/core";

@Component({
  selector: "hello",
  template: `
    <h1>Hello {{ name }}!</h1>

    <div>
      <input
        type="radio"
        name="commentType1"
        value="foo"
        id="rdobuy"
        (click)="showSelection = false"
      />
      <label class="radio-label" for="rdobuy">All</label>
    </div>

    <div>
      <input
        type="radio"
        name="commentType1"
        value="bar"
        id="rdosell"
        (click)="showSelection = true"
      />
      <label for="rdosell" class="radio-label">Selection</label>
    </div>


    <div *ngIf="showSelection">Hello</div>
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class HelloComponent {
  @Input() name: string;
}

Answer 1

Это потому, что (click) со всем, что falsy. Останавливает распространение события, этот блок имеет собственную реакцию «проверки».

Вы можете создать функцию-обработчик

export class HelloComponent {
  @Input() name: string;
  showSelection: boolean;

  setSelection(newVal: boolean) {
    this.showSelection = newVal;
  } 
}

и затем вызвать ее в шаблоне:

(click)="setSelection(false)"

Рабочая пример: https://stackblitz.com/edit/angular-putvsm?file=src / app / hello.component.ts

Answer 2

Попробуйте, используя (change) и [checked]:

Я думаю, что (click) на первом получал плохие результаты.

     <div>
      <input
        type="radio"
        name="rdobuy"
        [checked]="!showSelection"
        value="foo"
        id="rdobuy"
        (change)="showSelection = false"
      />
      <label class="radio-label" for="rdobuy">All</label>
    </div>

    <div>
      <input
        type="radio"
        name="rdosell"
        [checked]="showSelection"
        value="bar"
        id="rdosell"
        (change)="showSelection = true"
      />
      <label for="rdosell" class="radio-label">Selection</label>
    </div>