可以在 foreach() 中使用服务

Question

import { Component, Input, Output, OnInit, OnChanges } from '@angular/core';
import { ViewComponent } from '../view/view.component';
import { HitoService } from '../../services/hito.service';

@Component({
  selector: 'app-time-line',
  templateUrl: './time-line.component.html',
  styleUrls: ['./time-line.component.css'],
  providers: [HitoService]
})

export class TimeLineComponent implements OnChanges, OnInit {
  @Input() calbuscador: String;
  @Input() idcalbuscador: String;
  public pepe: String
  nom_cal1: any;
  hito1: any = {};
  hito2: any = {};

  constructor(public _hitoService: HitoService) {
  }

  ngOnInit() {
  }
  ///we retrieve the value sento to this component in OnChanges
  ngOnChanges() {

    this.nom_cal1 = this.calbuscador;
    this.drawtimeline(this.nom_cal1, this._hitoService, this.idcalbuscador);
  }

  result: any[] = [];
  drawtimeline(nom_cal, _hitoService, idcalbuscador) {

    var container = document.getElementById('timeLine');
    //alert("id cal sele es :" + idcalbuscador);

    var k = 0;
    var j = 0;

    var master = new vis.DataSet();
    var items = new vis.DataSet();

    this.result.push({  "_id": this.idcalbuscador,
      "title": nom_cal });

    this.result.forEach(function (ev) {
      master.add([{ id: ev._id, content: ev.title, cal_id: ev._id }]);
      var g = ev._id;

      for (var i= 0; i<this.result.length; i++){
        console.log("hola");
        console.log(this.result[i]._id);
        this._hitoService.getHitos(this.result[i]._id)
              .subscribe(hito2 => {
                this.hito2 = hito2
                var items: any;
                items = hito2;

          items.forEach(function (item) {
            items.add([{ id: k, group: g, start: item.start_datetime, end: item.end_datetime, style: itemStyle(item.design), className: "pepe" }]);
            k++;
          });
          j++;
        }); 
      }
    });

我正在尝试使用 vis.js 实现时间线，我在这个 class 组件中检索了时间线的名称和 ID，然后在 ngOnChanges 中我调用了函数绘制时间线，将时间线的名称、它的 ID 和其他服务传递给它，以获取此特定时间线的可观察项。我有一个数组，它将存储我要查看的时间线（结果），然后是我订阅的可观察对象，以添加时间线的项目。第一个 foreach() 将删除结果数组中的第一个元素，获取该结果的项的可观察项，第二个 foreach() 将遍历可观察项并打印项，然后重新开始并移动到下一个。但是我在浏览器控制台中得到的只是：TypeError: this is undefined。可能没有使用 forach()

中的服务

Answer 1

您可以在 forEach 中使用箭头函数来继续使用封闭范围。

this.result.forEach((ev) => {
  // your code here
}

Answer 2

将当前 this 分配给另一个变量（例如，that），然后在回调中使用 that。

注意： 在您的回调函数中 this 更改为调用该函数的 JavaScript 上下文。

const that = this;        // save the current 'this' to 'that' variable

this.result.forEach(function (ev) {
      master.add([{ id: ev._id, content: ev.title, cal_id: ev._id }]);
      var g = ev._id;

      for (var i= 0; i< that.result.length; i++){
        console.log("hola");
        console.log(that.result[i]._id);
        that._hitoService.getHitos(that.result[i]._id)
              .subscribe(hito2 => {
                that.hito2 = hito2
                var items: any;
                items = hito2;

                ....
             ....
           ....

可以在 foreach() 中使用服务

can use service inside a foreach()

javascript

angular

angular2-observables

vis.js