过滤器组件未更新 Angular 中的输入

Question

我有一个 Angular 组件，我在其中使用 Filter 组件。 过滤器组件采用 [buttonText] 来拥有按钮标签。

最初显示按钮文本，但我确实想使用过滤器当前选定的复选框更新标签。

过滤器按钮不显示新的基本文本，该文本在 onFilterCheckboxChange 函数中更新，我不知道如何更新它或让组件重新渲染。

{{baseText}} 呈现每次更改的新信息，但 [buttonText]="baseText" 未更新。

<div class="drv-grid">
  <div drv-row="" class="drv-row">
    <div drv-col=""
      class="drv-bg--ui-05 drv-pt-md--02 drv-pb-md--02 drv-pt-sm--01 drv-pb-sm--01 drv-col-md-12 drv-col-sm-4">

      {{baseText}}

      <drv-filter #filterComponent class="drv-filter" [labelVisible]="labelVisible" [id]="id" [multiple]="true"
        [buttonText]="baseText" [showResetButton]="showResetButton" ismultiselect="true" [options]="[]">

        <drv-textinput id="filterSearch" label="Filter durchsuchen" type="search" (input)="onInput()"></drv-textinput>

        <div *ngIf="filteredOptions.length > 0" class="filter-search__filterSuggestion">
          <label *ngFor="let option of filteredOptions" class="filter-search__filterCheckbox"
            (change)="onFilterCheckboxChange(option.value)">
            <drv-checkbox [id]="'checkbox_' + option.label" [required]="false">
              {{ option.label }}
            </drv-checkbox>
          </label>
        </div>

        <div class="filter-search__AnwendenBtn drv-pt-md--02 drv-pb-md--02 drv-pt-sm--01 drv-pb-sm--01">
          <drv-button id="" label="Anwenden" fullSizeOption="full" />
        </div>

      </drv-filter>
    </div>
  </div>
</div>

import { Component, ChangeDetectorRef, OnInit, ChangeDetectionStrategy } from '@angular/core';
import * as data from '../../assets/data.json';

@Component({
  selector: 'filter-search',
  templateUrl: './filter-search.component.html',
  styleUrls: ['./filter-search.component.scss'],
  host: { 'class': 'filter-search' },
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class FilterSearchComponent implements OnInit {
  constructor(private cdr: ChangeDetectorRef) { }

  labelVisible: boolean = false;
  id!: string;
  showResetButton: boolean = true;
  selected?: boolean;
  baseText: string = '';
  selectCount: number = 0;
  searchValue = "";

  vorgaenge = (data as any).default;
  neueVorgaenge: string[] = [];
  selectedFilteroption: string[] = [];

  getData = this.vorgaenge.map((item: any) => {
    if (item.ausloeser.ausloesende_person.drv_id) {
      this.neueVorgaenge.push(item.ausloeser.ausloesende_person.drv_id);
      return this.neueVorgaenge;
    }
  });

  ngOnInit(): void {
    this.getData;
  }

  options = this.neueVorgaenge.map(item => ({ value: item, label: item }));
  filteredOptions = [...this.options];

  onInput() {
    this.searchValue = (<HTMLInputElement>document.getElementById('filterSearch')).value;

    this.filteredOptions = this.options.filter(item =>
      item.value.toLowerCase().includes(this.searchValue.toLowerCase())
    );
  }

  onFilterCheckboxChange(event: any) {
    const index = this.selectedFilteroption.indexOf(event);

    if (index === -1) {
      this.selectedFilteroption.push(event);
    } else {
      this.selectedFilteroption.splice(index, 1);
    }

    this.selectCount = this.selectedFilteroption.length;
    this.baseText = this.selectCount.toString();
    this.cdr.detectChanges();
  }

}

我已经尝试过 ngOnChanges 但这没有被调用。

Answer 1

您可以重构组件以实现更好的可读性：

import { Component, ChangeDetectorRef, OnInit, ChangeDetectionStrategy } from '@angular/core';
import * as data from '../../assets/data.json';

@Component({
  selector: 'filter-search',
  templateUrl: './filter-search.component.html',
  styleUrls: ['./filter-search.component.scss'],
  host: { 'class': 'filter-search' },
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class FilterSearchComponent implements OnInit {
  labelVisible = false;
  id!: string;
  showResetButton = true;
  selected?: boolean;
  baseText = '';
  selectCount = 0;
  searchValue = '';

  vorgaenge = (data as any).default;
  neueVorgaenge: string[] = [];
  selectedFilteroption: string[] = [];
  options: { value: string, label: string }[] = [];
  filteredOptions: { value: string, label: string }[] = [];

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
    this.initializeData();
    this.options = this.neueVorgaenge.map(item => ({ value: item, label: item }));
    this.filteredOptions = [...this.options];
  }

  private initializeData(): void {
    this.vorgaenge.forEach((item: any) => {
      const drvId = item.ausloeser?.ausloesende_person?.drv_id;
      if (drvId) {
        this.neueVorgaenge.push(drvId);
      }
    });
  }

  onInput(event: Event): void {
    const input = event.target as HTMLInputElement;
    this.searchValue = input.value;
    this.filterOptions();
  }

  private filterOptions(): void {
    const searchLower = this.searchValue.toLowerCase();
    this.filteredOptions = this.options.filter(item =>
      item.value.toLowerCase().includes(searchLower)
    );
  }

  onFilterCheckboxChange(event: string): void {
    const index = this.selectedFilteroption.indexOf(event);
    if (index === -1) {
      this.selectedFilteroption.push(event);
    } else {
      this.selectedFilteroption.splice(index, 1);
    }
    this.updateSelectCount();
  }

  private updateSelectCount(): void {
    this.selectCount = this.selectedFilteroption.length;
    this.baseText = this.selectCount.toString();
    this.cdr.detectChanges();
  }
}