Изменить булево на (изменить) событие

Question

Я пытаюсь использовать логическое значение, чтобы определить, проверена ли переключатель в форме или нет.

(я пропустил ненужный код для файлов HTML и TS)

HTML:

<mat-radio-button (change)="toggleEditable($event)" value="overdraft">Overdraft</mat-radio-button>

TypeScript:

overdraft = false;

toggleEditable(event) {
  if ( event.target.checked ) {
    this.overdraft = true;
  }
}

Событие не запускается, потому что, когда я пытаюсь щелкнуть переключатель и отправить форму, overdraft не установлен в true. ОДНАКО , если я использую событие (click) вместо (change), оно работает нормально, события НО (click) имеют тот недостаток, что вам нужно дважды щелкнуть радио-кнопки для отображения визуального выделения, и поэтому я чувствую необходимость использовать (change) (подробнее здесь: mat-checkbox не проверяет, является ли условие ложным (только при двойном щелчке) ).

Как мне решить эту проблему, чтобы при щелчке переключателя у меня происходило событие (change) и для overdraft устанавливалось значение true без использования событий (click), которые поставляются с пользовательским интерфейсом-issues?

РЕШЕНИЕ :

Если вы хотите получить фактическое значение mat-radio-button, вам потребуется внести следующие изменения:

1) Вместо использования [value]="overdraft" в HTML используйте value без квадратных скобок, например: <mat-radio-button value="overdraft">Overdraft</mat-radio-button>

2) Теперь в коде TypeScript вы можете получить доступ к свойству значения из HTML:

valueChanged(event: MatRadioChange) {
  console.log(event.value); //will log the value for the button you clicked
}

Answer 1

1. Вы смотрели на то, что console.log(event.target.checked) возвращает вам?
2. События угловых 2 радиокнопок try <input type="radio" "toggleEditable($event)" value="overdraft">Overdraft</input> Если это работает, может быть, это проблема сmat-radio-button

3. Событие изменения радиокнопки материала Angular 4 предполагает, что вам необходим другой тип события:

   import { MdRadioChange } from '@angular/material'; ... toggleEditable(event: MdRadioChange) {...}

Answer 2

Вы пробовали использовать ngModel?

это может быть просто:

<mat-radio-group  [(ngModel)]="selectedValue" (change)="valueChanged($event)">
  <mat-radio-button value="overdraft">Overdraft</mat-radio-button>
  <mat-radio-button value="otherValue">Other</mat-radio-button>
</mat-radio-group>

И в вашем контроллере вы можете иметь:

valueChanged(event) {
    this.overdraft = (event.value ==='overdraft');
}

Answer 3

Вы также можете изменить значение непосредственно в HTML, когда событие change инициируется:

<mat-radio-button (change)="overdraft = !overdraft; display()" [value]="overdraft">Overdraft</mat-radio-button>

  overdraft = false;
  display() {
    console.log(this.overdraft);
  }

Функция отображения здесь только для демонстрационных целей;)