2017-08-23 39 views
0

に反映これは私のDataServiceある:角度2 BehaviorSubjectデータ操作サービス

private resultsChanged$: BehaviorSubject<Test[]> = 
         new BehaviorSubject<any>([]); 

constructor(private http: Http) { } 

public getLatestTrends(): Observable<Test[]> { 
    const latestUrl = `api/tests/trends/groupname=${this.group}&name=${this.team}`; 
    return this.http.get(this.baseUrl + latestUrl) 
     .switchMap((res) => { 
     const json = res.json(); 
     console.log(json); 
     this.resultsChanged$.next(json as Test[]); 
     return json; 
    }); 
} 

public getSubject(): Observable<Test[]> { 
    return this.resultsChanged$.asObservable(); 
} 

これはのDataServiceを使用して、返されたデータをフォーマットする成分である。

private latestTests: Test[]; 
private subscription: Subscription; 

constructor(private testDataService: TestDataService) { } 

ngOnInit() { 

    this.subscription = this.testDataService.getSubject() 
     .subscribe((res) => { 
      if (res === undefined || res.length < 1) { 
       return; 
      } 

      this.latestTests = this.getFormattedTests(res.reverse()); 
     }); 
} 

getFormattedTests(trends) { 
    let formattedTests = []; 

    if (trends === undefined || trends === null) { 
     return formattedTests; 
    } 
    formattedTests = trends.map((trend) => { 

     if (this.isPassed(trend.ran, trend.passed, trend.total)) { 
      trend.state = 'check_circle'; 
      trend.color = 'green'; 
     } else { 
      trend.state = 'warning'; 
      trend.color = 'red'; 
     } 

     const ranPercent = this.getFixedPercent(trend.ran, trend.total); 
     const passPercent = this.getFixedPercent(trend.passed, trend.ran); 
     const failPercent = this.getFixedPercent(trend.failed, trend.ran); 

     trend.notRun = trend.total - trend.ran; 
     trend.ran = `${trend.ran} (${ranPercent})`; 
     trend.passed = `${trend.passed} (${passPercent})`; 
     trend.failed = `${trend.failed} (${failPercent})`; 

     return trend; 
    }); 

return formattedTests; 

}

HTML

<tr *ngFor="let test of latestTests"> 
     <td> 
     <span><md-icon [ngStyle]="getStateOfBuild(test)">{{test.state}}</md-icon> {{test.versionString}}</span> 
     </td> 
     <td>{{test.total}}</td> 
     <td>{{test.ran}}</td> 
     <td>{{test.passed}}</td> 
     <td>{{test.failed}}</td> 
     <td>{{test.notRun}}</td> 
     <td></td> 
     <td>{{test.duration | duration }}</td> 
</tr> 

さて、サイトが読み込まれると、データはフォーマットされ、latestTests変数に保存されます。私のルートの間を循環してngInitが再び呼び出されると、データは再びフォーマットされ、私は理解しません。奇妙なことは、私がconsole.log(json); DataServiceでは、元のデータではなくフォーマットされたデータをログアウトします...それはどのように可能ですか? BehaviorSubjectのデータが何らかの形で変更されているかのようです。私は何が欠けていますか?

明確にする必要がある場合は、お手伝いし、コメントしてください。件名とBehaviorSubjectの差の

+0

'BehaviorSubject'は受信した最新の値を保存し、サブスクリプションですべてのオブザーバーにそれを再生します。 – martin

+0

それはそうするはずですが、最新の値は、コンポーネントがngOnInitでフォーマットするときに変更されるようです。コンポーネントは、そのようなサブジェクトデータを操作できませんか? –

+0

配列の同じインスタンスを操作していませんか?たぶん 'this.resultsChanged $ .next(Array.from(json));' – martin

答えて

0

をメモ:

件名イベントバスのように動作し、データを保持していません。

BehaviorSubjectは、イベントバスのように動作することができますが、サブスクリプション時にストリームの最後の値も返します。あなたのサービスで

あなたはただ宣言することができます。

public mySubject = new BehaviorSubject(null); 

は今、あなたは、次の操作を行うためにそれを使用することができますすべてです

this.testDataService.mySubject.subscribe(
    res => console.log(res), 
    error => console.log(error) 
); 
this.testDataService.mySubject.next('data'); 

を。私はそれが助けてくれることを願っています

+0

複数のコンポーネントがデータを使用するため、データサービスでは元のデータのみを保持する必要がありますが、コンポーネントでフォーマットされたデータを保持しているように見えます。 –

関連する問題