флажок установлен, но флажок не отображается - PullRequest
Новая
       2

флажок установлен, но флажок не отображается

0 голосов
/ 02 апреля 2019

У меня есть компонент, содержащий mat-list-item, который при нажатии переключает состояние флажка между установленным, неопределенным и непроверенным (в этом порядке). Каждый элемент списка имеет числовое значение, которое также добавляется к итоговому значению при проверке, вычитается из итогового значения при неопределенности (отображается здесь как свойство mitigated) и снова имеет нулевое значение, когда оно не выбрано.

Пользовательский интерфейс выглядит и работает правильно, событие click привязано к mat-list-item. При щелчке элемента списка появляется флажок. При повторном щелчке стиль применяется, поэтому он имеет зачеркнутый текст, а флажок находится в состоянии indeterminate. Щелкнул в третий раз, он сбрасывается на непроверенный. Математика правильно работает и с этим поведением.

Однако, когда я нажимаю на сам флажок , а не на элемент списка, этот флажок не отображается как отмеченный, даже если мой оператор console.log показывает значение true после его нажатия. Он добавляет числовое значение элемента списка при каждом нажатии, и пользовательский интерфейс не отражает никаких изменений. Я не могу понять, почему это происходит.

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

Компонент: 

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Risk } from './risk.model';
import { MatCheckboxChange, MatCheckbox } from '@angular/material';

@Component({
  selector: 'app-risk',
  templateUrl: './risk.component.html',
  styleUrls: ['./risk.component.css']
})
export class RiskComponent {
  @Input('risk') risk: Risk;
  @Output() riskSelected = new EventEmitter<number>();
  mitigated: boolean;
  countScore: boolean;

  constructor() { }

  onSelect(c: MatCheckbox) {
    this.mitigated = c.checked && !this.mitigated;
    c.checked = ((c.checked && this.mitigated) || !c.checked);
    console.log('Checked: ', c.checked); // logs true, not rendered in browser
    this.countScore = c.checked && !this.mitigated;

    this.changeScore(c);
  }

  private changeScore(c: MatCheckbox): void {
    let changeValue: number;

    if (!this.mitigated) {
      changeValue = c.checked ? this.risk.score : 0;
    } else {
      changeValue = -this.risk.score;
    }

    this.riskSelected.emit(changeValue);
  }
}

Шаблон: 

<mat-list-item fxLayout="row"
               fxLayoutAlign="space-between center"
               class="risk-list-item"
               [class.mitigated]="mitigated"
               (click)="onSelect(c)">

  <div fxLayoutAlign="start center" fxFlex>
    <p>
      <span matBadge="{{ risk.requiresApproval ? 'AR' : ''}}"
            matBadgeColor="accent" matBadgePosition="before" matBadgeOverlap="false">
        {{ risk.description }}
      </span>
    </p>
  </div>

  <div fxLayout fxLayoutAlign="end center" fxFlex>
    <mat-chip-list disabled="true">
      <mat-chip color="primary">{{ risk.score }}</mat-chip>
    </mat-chip-list>

    <mat-checkbox #c color="primary" [indeterminate]="mitigated">
    </mat-checkbox>
  </div>
</mat-list-item>

<!-- MITIGATION NOTES -->
<div *ngIf="mitigated">
  <mat-form-field>
    <textarea matInput placeholder="Mitigation Note:"></textarea>
  </mat-form-field>
</div>
...