javascript - Nz-Slider 格式化程序输入，nz-zorro-9.3.1

Question

滑块有一些奇怪的问题。我想将滑块的值更改为滑块所在组件中的另一个值。使用输入格式化程序时，一切都很好，但是当我使用“this.slider”时，它返回我未定义。因为格式化函数在通过输入传递它时会丢失它的上下文。为了清楚起见，我举了一个例子

export class ConfigurationRulesListComponent implements OnInit {
  @ViewChild('slider', { static: false }) sliderComponent: NzSliderComponent;
  listOfValues: Array<string> = [];
  currentValue = 0;
  minValue = 0;
  maxValue = 0;
  stepMarks: Marks = {};

  constructor() {}

  ngOnInit() {
    this.getValuesFromBackend();
    this.init();
  }

  formatter(index: number): string {
    const marksFound: Marks = this.sliderComponent.nzMarks; // here undefine beccose, is other context
    const label = (marksFound[index] as MarkObj).label;
    const result = new RegExp(/(?<=<strong>\s*).*?(?=\s*<\/strong>)/);
    const matchResults = label.match(result);
    return `${matchResults[0]}`;
  }

  private init() {
    // para construir las marcas en caso de que tengan estilos determinados
    for (let i = 0; i < this.listOfValues.length; i++) {
      const newMark = new Marks();
      newMark[i] = {
        style: {
          color: '#f50'
        },
        label: `<strong>${this.listOfValues[i]}</strong>`
      };
      this.stepMarks = {
        ...this.stepMarks,
        ...newMark
      };
    }
  }

  private getValuesFromBackend() {
    //  adicionarle observables
    this.listOfValues = ['First', 'Second', 'Third', 'fourth', 'fifth', 'sixth'];
    this.currentValue = 0;
    this.minValue = 0;
    this.maxValue = this.listOfValues.length - 1;
  }
}

html>

<nz-slider
  #slider
  [nzMin]="minValue"
  [nzMax]="maxValue"
  [nzMarks]="stepMarks"
  [(ngModel)]="currentValue"
  [nzTipFormatter]="formatter"
></nz-slider>

标签： javascriptangularng-zorro-antd