mat-checkbox неправильно отображает проверенное значение

Question

Я использую компонент mat-checkbox из Angular Материал. Но когда я проверяю флажок, если я ссылаюсь на event.target.querySelector('input[type=checkbox"]').checked, он говорит мне, что значение равно false, и когда я снимаю флажок, он говорит, что значение равно true. Это должно быть наоборот.

Кроме того, если я попытаюсь использовать ViewChild с mat-checkbox, это приведет к неопределенности. Поэтому я не могу добраться до элемента, используя this.el.nativeElement.

Я иллюстрирую проблему с этим изолированным git репо:

https://github.com/lovefamilychildrenhappiness/AngularMaterialDefaultStyle/commit/4ab86c34adf9ee966981e7ca6afe14ca403fb9c1

Вот некоторый соответствующий код из репо:

// app.component.ts
@ViewChild('ref', {static: false}) el: ElementRef;

doSomething(e) {
    // this reads false when you check the checkbox and true when you uncheck the check box:
    console.log('checkbox checked? ', e.target.querySelector('input[type="checkbox"]').checked);

    // I can't even use ViewChild with mat-checkbox. It is undefined:
    // 'cannot read property nativeElement of undefined'
    console.log('the native element: ', this.el.nativeElement);

  }

 // app.component.html
 <mat-checkbox
 (click)="doSomething($event)"
 >Bladder</mat-checkbox
 > 

Почему event.target.querySelector('input[type=checkbox"]').checked дает неправильное значение? И почему this.el не определено?

Answer 1

с самой последней angular 8.0.0-r c .5 было включено критическое изменение, где @ViewChild должен определять параметр stati c.

В angular 7 выпуск (7.2.15) эта опция не существует, что приводит к ошибке машинописи во время компиляции.

один из обходных путей заключается в «приведении» типа опции к любому

@ViewChild('ref', {static: false} as any) el: ElementRef;

для this.el undefined, это может быть проблемой, если ваш целевой элемент находится внутри скрытого элемента, тогда не используйте *ngIf. Вместо этого используйте класс, чтобы показать / скрыть скрытый элемент. Вы можете прочитать больше здесь

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

onChange(item, event) {
  if (event.checked) {            
     // Add checked / true vlaues to array
      this.selectedValues.push((item));
      // use for loop to iterate values to check true or false and perform operations
     }
       else{
        //remove unchecked / false values
        let index = this.selectedValues.indexOf(item);
        this.selectedValues.splice(index, 1);
      }
  }

в html:

<mat-checkbox (change)="onChange(val1, $event)" [ngModel]="checkedVal">label1</mat-checkbox>

Answer 2

Я предполагаю, что щелчок происходит до обновления проверенного значения. Попробуйте (изменить) событие и добавьте #ref к вашему флажку

html

 <mat-checkbox #ref (change)="doSomething($event)">Bladder</mat-checkbox> 

ts

 doSomething(e) {
   console.log(e.target.checked, this.el.nativeElement);
   // true/false, HTMLInputElement
 }