Angular 如何修复调用函数时未定义的“this”

我是d3.js v5和angular v7的新手，我的问题是，每当我调用multiFormat函数来格式化日期时，“this”就变得未定义

我已经尝试将这个.d3直接传递给multiFormat，它可以工作，但我不知道在这种情况下如何传递日期参数。。。 有效的解决方案是在addXandYAxis中声明多格式函数，并使用所有参数

private addXandYAxis() {
    const d3 = this.d3;
    let dmax = d3.extent(this.data, d => d3.timeParse('%d/%m/%Y')(d.date));
    dmax[0] = dmax[0].setMonth(dmax[0].getMonth() - 1);

    // definition des domains de X & Y 
    const xDomain = this.data.map(d => d.date);
    const yDomain = [0, this.d3.max(this.data, d => d.Donnees)];

    // localisation des dates
    const locale = this.d3.timeFormatLocale({
      dateTime: '%A, %e %B %Y г. %X',
      date: '%d.%m.%Y',
      time: '%H:%M:%S',
      periods: ['AM', 'PM'],
      days: ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'],
      shortDays: ['lu', 'ma', 'me' , 'je', 've', 'sa', 'di'],
      months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Decembre'],
      shortMonths: ['janv.', 'févr.', 'mars', 'avr', 'mai', 'juin', 'juill.' , 'août' , 'sept.' , 'oct.' , 'nov.' , 'déc.' ]
    });

    const formatMillisecond = locale.format('.%L');
    const formatSecond = locale.format(':%S');
    const formatMinute = locale.format('%I:%M');
    const formatHour = locale.format('%I %p');
    const formatDay = locale.format('%a %d');
    const formatWeek = locale.format('%b %d');
    const formatMonth = locale.format('%B');
    const formatYear = locale.format('%Y');

    function multiFormat(date) {
      console.log('date=' + date);
      return(d3.timeSecond(date) < date ? formatMillisecond
      : d3.timeMinute(date) < date ? formatSecond
      : d3.timeHour(date) < date ? formatMinute
      : d3.timeDay(date) < date ? formatHour
      : d3.timeMonth(date) < date ? (d3.timeWeek(date) < date ? formatDay : formatWeek)
      : d3.timeYear(date) < date ? formatMonth
      : formatYear)(date);
      }

我需要在其他地方使用多格式，我宁愿避免重复它。 我在ngOnInit中使用addXandYAxis，我的代码：

public addXandYAxis() {
    const d3 = this.d3;
    const dmax = d3.extent(this.data, d => d3.timeParse('%d/%m/%Y')(d.date));

    // define X & Y domains
    const xDomain = this.data.map(d => d.date);
    const yDomain = [0, this.d3.max(this.data, d => d.Donnees)];

    // Abscisse --> date
    this.x = d3.scaleTime()
    .domain(dmax)
    .range([ 0, this.width ]);

    this.xAxis = d3.axisBottom(this.x);

    this.svg.append('g')
    .attr('transform', 'translate(0,' + this.height + ')')
    .call(this.xAxis.tickFormat(this.multiFormat));
  }

 private multiFormat(date) {
    return(this.d3.timeSecond(date) < date ? this.formatMillisecond
      : this.d3.timeMinute(date) < date ? this.formatSecond
      : this.d3.timeHour(date) < date ? this.formatMinute
      : this.d3.timeDay(date) < date ? this.formatHour
      : this.d3.timeMonth(date) < date ? (this.d3.timeWeek(date) < date ? this.formatDay : this.formatWeek)
      : this.d3.timeYear(date) < date ? this.formatMonth
      : this.formatYear)(date);
      }

结果是错误类型错误：this.d3未定义

感谢您的时间：

通常，通过将有问题的函数转换为箭头函数可以解决此问题：

public addXandYAxis = () => {
// ...

private multiFormat = (date) => { 
// ...

---

可以使用闭包调用多格式 所以你可以这样做

    this.svg.append('g')
.attr('transform', 'translate(0,' + this.height + ')')
.call(this.xAxis.tickFormat(()=>{this.multiFormat()}));

---

因为“this”是指调用函数的范围

谢谢，如果我这样做，我会有一个奇怪的行为，勾号是函数的多格式重新启用可能更清楚：谢谢，但如果我这样做，我会有一个奇怪的行为，X轴上的勾号是函数的多格式代码重新启用，而不是日期。我必须将代码更改为.callthis.xAxis.tickFormat=>this.multiFormat；因为我在询问日期参数时出错。谢谢，但行为与AMINMx的解决方案相同。