How to correct object loading at Angular 7?

Question

Look at the picture;

You can notice that when you click on the Debits checkbox the list only carries all the names that have the debited word on the side, but it doesn’t happen the same when the Fine checkbox is marked, erroneously it carries the names that have the word debits on the side and also that they had the word fine, the expected behavior is that when marking the checkbox fine carry only all names that have the word fine. And it gets worse when we mark the two checkbox it carries twice the name they had the word weak.

I manage to implement the method that load the list, but it was not perfect because I took the code and adapted to my context, I just need to adjust so when I mark the checkbox fine it only carries the names that had the word fine, and when I mark the debit checkbox it carries only all the names that had the word debit, and if I mark them both it brings everything, both fines and debts without having duplicity, and I need help.

These are the two methods responsible for implementing;

  async selecionaTiposDeliberacao(valor) {
    debugger;
      if (!this.arrayTipoDeliberacoes.includes(valor)) {

        this.arrayTipoDeliberacoes.push(valor);

      } else {
         this.arrayTipoDeliberacoes = this.arrayTipoDeliberacoes.filter(v => v != valor);
      }
    debugger;
      if (this.arrayTipoDeliberacoes.length > 0) {
        this.habilitarListaDevedor = false;
          this.listarParticipantesProcesso();
      } else {
        this.tiposDebito   = [];
        this.participantes = [];
        this.idDevedor = undefined;
        this.habilitarCheckCombo = true;
      }

  }

  protected listarParticipantesProcesso() {

    if (this.habilitarListaDevedor == true){
      this.processo = new Processo();

    }

    this.processoService.listarParticipantesProcesso(this.processo.numero, this.arrayTipoDeliberacoes)
      .subscribe((data: any) => {
        if (data && data.dataTransfers) {
          debugger;
          this.participantes = data.dataTransfers;
          this.habilitarCheckCombo = false;
         } else {
           this.participantes = [];
           this.habilitarCheckCombo = true;
         }
      }, (error) => {
        this.abrirModalInfo(error.error.header.mensagem, 'Erro', 'danger');
      });
  }

This is the HTML component;

<div class="col-md-3">
          <div class="radio">
            <label [class.textCinza]="habilitarCheck">
              <input
                type="checkbox"
                [disabled]="habilitarCheck"
                (change)="selecionaTiposDeliberacao($event.target.value)"
                value="0"/> Multas
            </label>
          </div>
        </div>

 <div class="col-md-3">
              <div class="radio">
                <label [class.textCinza]="habilitarCheck">
                  <input
                    type="checkbox"
                    [disabled]="habilitarCheck"
                    (change)="selecionaTiposDeliberacao($event.target.value)"
                    value="1"/> Débitos
                </label>
              </div>
            </div>

Answer 1

In your filter you should do something similar to

export class myClass implements OnInit {
tipoMulta:boolean;
tipoDebitos: boolean;

  constructor() { }

  ngOnInit() {
  }
  selecionaTiposDeliberacao() {
  if(multas && debitos) {
  this.arrayTipoDeliberacoes = 
  this.arrayTipoDeliberacoes.filter(v => v === tipoMulta || v ===       tipoDebitos);
  } else if(multas) {
    this.arrayTipoDeliberacoes = this.arrayTipoDeliberacoes.filter(v => v === tipoMulta);
  } else if(tipoDebitos) {
    this.arrayTipoDeliberacoes = this.arrayTipoDeliberacoes.filter(v =>  v === tipoDebitos);
  } else {
    this.arrayTipoDeliberacoes = this.arrayTipoDeliberacoes;
  }
  }

}

<div class="col-md-3">
          <div class="radio">
            <label [class.textCinza]="habilitarCheck">
              <input
                type="checkbox"
                [disabled]="habilitarCheck"
                 [(ngModel)]="tipoMulta"
                (change)="selecionaTiposDeliberacao()"
                value="0"/> Multas
            </label>
          </div>
        </div>

 <div class="col-md-3">
            <div class="radio">
              <label [class.textCinza]="habilitarCheck">
                <input
                  type="checkbox"
                  [disabled]="habilitarCheck"
                  [(ngModel)]="tipoDebitos"
                  (change)="selecionaTiposDeliberacao()"
                  value="1"/> Débitos
              </label>
            </div>
          </div>

to get the variables you can use two way data Binding, so there is no need for parameter in the change action. Example