Переключить значение в поле флажка Angular Material

У меня есть форма, управляемая шаблоном, в которой я устанавливаю флажок, который может переключать его значение.

Составная часть

public toggles = [
    { value: 'toggled', display: 'Toggled' },
    { value: 'untoggled', display: 'UnToggled' },
];

<div>
    <input type="hidden" name="toggle" [(ngModel)]="user.toggle">
    <div>
        <label>
            <input type="checkbox"
                [checked]="user.toggle === toggles[0].value" 
                (change)="$event.target.checked? (user.toggle =  toggles[0].value) : (user.toggle = toggles[1].value)">
            {{ toggles[0].display }}
        </label>
    </div>
</div>

Следующее отлично работает, но когда я переключаюсь на Angular Material, он просто не работает.

Код шаблона материала

<input type="hidden" name="toggle" [(ngModel)]="user.toggle">
<md-checkbox [checked]="user.toggle === toggles[0].value"
               (change)="$event.target.checked?(user.toggle = toggles[0].value): (user.toggle = toggles[1].value)">
    {{toggles[0].display}}</md-checkbox>

Я получаю следующую ошибку в консоли: не удается прочитать свойство консоли undefined,

TypeError: Cannot read property 'checked' of undefined
        at Object.eval [as handleEvent] (TemplateDrivenComponent.html:64)

Я знаю точку, в которой возникает ошибка $ event.target.checked angular не может прочитать это проверенное событие на md-checkbox, как обойти это, любые указатели будут отличными

Благодарность


angular angular-material2 angular4
person Rahul Singh    schedule 02.04.2017    source источник
comment
ну каково значение $ event.target?   -  person TheRealMrCrowley    schedule 02.04.2017
comment
значение $ event.target поступает из свойства флажка, как в коде без материала, он проверяет, установлен ли флажок или нет   -  person Rahul Singh    schedule 02.04.2017
comment
Я знаю, ЧТО это ... но какова его ЦЕННОСТЬ   -  person TheRealMrCrowley    schedule 02.04.2017
comment
зарегистрируйте объект, свойства которого вы пытаетесь просмотреть, и он, вероятно, прольет свет на то, что идет не так   -  person TheRealMrCrowley    schedule 02.04.2017
comment
также почему бы просто не использовать this?   -  person TheRealMrCrowley    schedule 02.04.2017
comment
@TheRealMrCrowley значение подходит в консоли, например, checked: true   -  person Rahul Singh    schedule 02.04.2017
comment
тогда проблема не в этом. в опубликованной вами ошибке говорится, что $event.target не определено, так как и где вы ее регистрируете?   -  person TheRealMrCrowley    schedule 02.04.2017
comment
спасибо @TheRealMrCrowley, ошибка заключалась в использовании $ event.target, используя его, как $ event.checked, помогло   -  person Rahul Singh    schedule 02.04.2017

Ответы (1)


arrow_upward
4
arrow_downward

Просматривая комментарии, попробуйте следующее: надеюсь, это решит проблему, я думаю, вам не нужно использовать цель с событием в материале.

 <input type="hidden" name="toggle" [(ngModel)]="user.toggle">
        <md-checkbox [checked]="user.toggle === toggles[0].value"
                       (change)="$event.checked?(user.toggle = toggles[0].value): (user.toggle = toggles[1].value)">
            {{toggles[0].display}}</md-checkbox>
person Community    schedule 02.04.2017