Question

我是棱角分明的新手，我遇到了问题。我使用ReplaySubject在组件之间共享数据，但我得到了它但是如何更新我的数据呢？

我想从http het每分钟添加一个值，但是使用Next()方法我会覆盖所有数据。

所以这是我的文件：

数据service.service.ts



import {Injectable, OnInit} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ReplaySubject } from 'rxjs/ReplaySubject';
import { Observable  } from 'rxjs/Observable';

import {ImpiantoModel} from './impianto.model';

@Injectable()
export class DataServiceService implements OnInit {
private myUrl = ('https://my-json.server.typicode.com/nicscap/fake_json/ImpiantiProva');


myData: ReplaySubject<ImpiantoModel[]> = new ReplaySubject();

constructor(private http: HttpClient) { }

stream$(): Observable<ImpiantoModel[]> {
    return this.myData.asObservable();
}


ngOnInit() {
   this.http.get<ImpiantoModel[]>(this.myUrl)
    .subscribe(
        data => {
        this.myData.next(data);
});
return this.myData;
}

private newdata = [
 {
 'nomeImpianto': 'MFL8',
 'descrImpianto': 'Multifilo 8',
 'posizione': 'Place8',
 'dati_status': 'Place8',
 'unita_misura': 'm/s'
 },
];

pushData() {
   this.myData.next(this.newdata);
 }

}

import {Injectable, OnInit} from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { ReplaySubject } from 'rxjs/ReplaySubject'; import { Observable } from 'rxjs/Observable'; import {ImpiantoModel} from './impianto.model'; @Injectable() export class DataServiceService implements OnInit { private myUrl = ('https://my-json.server.typicode.com/nicscap/fake_json/ImpiantiProva'); myData: ReplaySubject<ImpiantoModel[]> = new ReplaySubject(); constructor(private http: HttpClient) { } stream$(): Observable<ImpiantoModel[]> { return this.myData.asObservable(); } ngOnInit() { this.http.get<ImpiantoModel[]>(this.myUrl) .subscribe( data => { this.myData.next(data); }); return this.myData; } private newdata = [ { 'nomeImpianto': 'MFL8', 'descrImpianto': 'Multifilo 8', 'posizione': 'Place8', 'dati_status': 'Place8', 'unita_misura': 'm/s' }, ]; pushData() { this.myData.next(this.newdata); } }

因此，我发出了http请求，我希望data-service.service.ts附加pushData()，但会覆盖。

app.component.ts newdata

import {Component, OnInit} from '@angular/core';
import {DataServiceService} from './data-service.service';
import {ImpiantoModel} from './impianto.model';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';

systems: ImpiantoModel[];

constructor(private _dataService: DataServiceService) {}

getdata() {
   this._dataService.stream$().subscribe(
      result => this.systems = result
      );
}

 ngOnInit() {
    this._dataService.ngOnInit();
    this.getdata();
 }
}

我希望通过推送“pushdata”，新数据在先前数据之后插入，而不是覆盖它们。我能怎么做？谢谢！

Answer 1

您可以使用scan运算符累计值

myData: ReplaySubject<ImpiantoModel> = new ReplaySubject();
stream$: Observable<ImpiantoModel[]>;

constructor(){
    this.stream$ = this.myData
        .asObservable
        // append current value on previous array
        .scan((acc, curr) => [...acc, curr], []);
}

这是一个stackblitz演示。

Answer 2

如果http响应是一个数组，你只需要连接结果。

  this._dataService.stream$().subscribe((result) => {
      this.systems = this.systems.concat(result) // here
  });

将数据添加到ReplaySubject <impiantomodel []>但不用next（）覆盖

2 个答案: