Início / coding / Perguntas / 79550540
Accepted
spring_hiber
Asked: 2025-04-02 19:50:01 +0800 CST

Como exibir todos os dados com caixas de seleção de exclusão mútua angular

  • 772

Estou tentando descobrir como exibir todos os valores de identificador (linhas da tabela de materiais) se a caixa de seleção ALL estiver marcada. Minha configuração atual filtra as linhas com base em valores idênticos, mas a palavra-chave 'ALL' não é um valor real na tabela de materiais.

Acho que a correção precisaria acontecer aqui, ou seja, se TUDO estiver marcado, retorne [...dados]

 if (
   !this.identifierFilterValue ||
   this.identifierFilterValue.length === 0
    ) {
   console.log('No Identifier Filters are selected return full data');
   return [...data];
  }

Como testar: Quando a página carregar, clique no botão de pesquisa e alterne a caixa de seleção ALL algumas vezes. Quando estiver desmarcada, todas as linhas aparecerão. No entanto, quero que todas as linhas apareçam se ALL estiver marcado.

Aqui está meu stackblitz.

javascript

1 respostas

  1. Best Answer

    Podemos simplificar o código para apenas duas condições if que lidam com a condição de caixa de seleção exclusiva.

    1. Se ALLselecionado, uma das caixas de seleção será marcada.

    2. Se uma das caixas de seleção estiver selecionada, então ALLselecionada.

    Descarte o emitEvent: false, porque as últimas atualizações de valor não estão refletidas no valueChanges.

    handleCheckboxSelection(previousValues: any, values: any) {
  const filterGroupCtrl = this.reportListFG.get('filterGroup');
  if (
    previousValues.ALL &&
    (values.Checkbox1 || values.Checkbox2 || values.Checkbox3)
  ) {
    filterGroupCtrl.patchValue({
      ALL: false,
    });
  } else if (
    values.ALL &&
    (previousValues.Checkbox1 ||
      previousValues.Checkbox2 ||
      previousValues.Checkbox3)
  ) {
    filterGroupCtrl.patchValue({
      Checkbox1: false,
      Checkbox2: false,
      Checkbox3: false,
    });
  }
  this.populateIdentifierFilterValue();
}

    Podemos escrever uma função que recalculará uma identifierFilterValuevez durante o carregamento e novamente a cada alteração de valor.

    populateIdentifierFilterValue() {
  const filterGroupCtrl = this.reportListFG.get('filterGroup');
  this.identifierFilterValue = Object.keys(filterGroupCtrl.value).filter(
    (key: any) => filterGroupCtrl.value[key]
  );
}

    Quando nenhum filtro for selecionado, certifique-se de retornar uma matriz vazia.

    applyFilter(): void {
  console.log('mockData************', this.mockData);
  if (!this.mockData || this.mockData.length === 0) {
    console.error('No Data to Filter');
    return;
  }

  let filteredData = [...this.mockData]; // Create a copy of the original mockData

  filteredData = this.filterByIdentityCheckbox(filteredData);

  //try filter predicate
  //this.dataSource.filterPredicate = this.createFilter(); // Update the filter predicate
  //this.dataSource.filter = 'triggerFilter'; // Trigger the filter

  console.log('Filtered Data ', filteredData);
  if (this.dataSource) {
    this.dataSource.data = filteredData;
    this.dataSource.paginator = this.paginator; // Assign paginator here
  }
  if (this.dataSource && this.dataSource.paginator) {
    this.dataSource.paginator.firstPage();
  }
}

    Por fim, podemos escrever uma condição para que, quando ALLfor selecionado, retornemos todos os itens.

    filterByIdentityCheckbox(data: any[]): any[] {
  console.log(
    '******Applying filter by identifierFilterValue:',
    this.identifierFilterValue
  );

  if (
    !this.identifierFilterValue ||
    this.identifierFilterValue.length === 0
  ) {
    console.log('No Identifier Filters are selected return full data');
    return [];
  }

  return data.filter((item) => {
    if (this.identifierFilterValue.indexOf('ALL') > -1) {
      return true;
    }
    console.log('Checking item identifier:', item.identifier);

    if (this.identifierFilterValue.indexOf(item.identifier) !== -1) {
      console.log('Matched identifier:', item.identifier);
      return true;
    } else {
      console.log('Identifier not matched', item.identifier);
      return false;
    }
  });
}

    Demonstração do Stackblitz

    • 1

relate perguntas