2017-02-18 3 views
2
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++; 
     }); 

     } 
    }); 

私は私はその後ngOnChangesに私は関数を呼び出し、このクラスのコンポーネントに名前とタイムラインのIDを取得し、vis.jsを使用してタイムラインを実装しようとしていますそれにタイムラインの名前を渡すタイムラインを描画します。これはidであり、他のサービスでは、この特定のタイムラインのオブザーバブルアイテムを取得します。私はタイムラインの項目を追加するために、私が見たいタイムライン(結果)と、次に私が購読した観測値を格納する配列を持っています。最初のforeach()は結果配列の最初の要素を削除し、その結果の項目のオブザーバブルを取得し、2番目のforeach()はオブザーバブル項目を通過して項目を出力し、次に開始して次の項目に移動します。しかし、私がブラウザのコンソールに表示するのは、TypeError:これは未定義です。おそらく、あなたが囲むスコープを使用して維持するためにあなたのforEach内の矢印機能を使用することができますはforeachの()内のサービスを利用することができます

+0

「this」をバインドするには、矢印関数 '()=> {}'を作成する必要があります。 – jonrsharpe

答えて

1

コールバックにthatを使用し、その後、別の変数(例えば、that)に現在のthisを割り当てます。

注:コールバック関数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; 

       .... 
      .... 
      .... 
2

forach()内のサービスを利用していません。

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

関連する問題