使用Angular中的RXJS从单个组件上的多个服务中获取数据 component.ts

如何解决使用Angular中的RXJS从单个组件上的多个服务中获取数据 component.ts

我有两项服务

ser1。

  getdata1() {
    this.http.get<{message:string,Data1:any}>('http://localhost:3000/api/1')
      .pipe(map((data1)=>{
        return Data1.Data1.map(data=>{
          return  {
            id: data._id,data1Title:data1.data1Title,}
        })
      })).subscribe((data1) => {
        this.data1=data1
        this.serv1Subject.next([...this.data1])
      })
  }

  getData1Listener() {
    return this.serv1Subject.asObservable()
  }

ser2

  getdata2() {
    this.http.get<{message:string,Data2:any}>('http://localhost:3000/api/2')
      .pipe(map((data2)=>{
        return Data2.Data2.map(data=>{
          return  {
            id: data._id,data2Title:data2.data1Title,}
        })
      })).subscribe((data2) => {
        this.data2=data2
        this.serv2Subject.next([...this.data2])
      })
  }

  getData2Listener() {
    return this.serv2Subject.asObservable()
  }

现在在componentx上，我需要在nginit中获取data1和data2，并且在数据可用后需要执行功能Y

如何使用订阅触发功能Y？

在componentx.ts

中

ngOnInit() {
    this.Service1OberableSubject = this.serv1.getData1Listener().subscribe((data1) => {
      this.data1 = data1;
    })
    this.Service2OberableSubject = this.serv2.getData2Listener().subscribe((data2) => {
      this.data2 = data2;
    })
    this.serv1.getdata1()
    this.serv2.getdata2()
  }

解决方法

可能是这样的。使用B进入响应并执行所需的任何操作。 并且tap将合并响应并将其分配到数组中，第一个索引将是传入的第一个可观察对象的响应。

forkJoin

,

这是一个实现后的示例：

import android.content.ContentValues;
import android.content.Context;
import android.database.Cursor;
import android.database.SQLException;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;
import android.util.Log;

import java.util.List;


public class DataBaseHelper extends SQLiteOpenHelper {
    private static final String TAG = "DataBaseHelper";
    public DataBaseHelper(Context context,String name,SQLiteDatabase.CursorFactory factory,int version){
        super(context,name,factory,version);
    }
    @Override
    public void onCreate(SQLiteDatabase sqLiteDatabase) {
        sqLiteDatabase.execSQL("CREATE TABLE USER(EMAIL TEXT PRIMARY KEY,Password TEXT,NAME TEXT,PHONE LONG,GENDER TEXT)");
    }

    @Override
    public void onUpgrade(SQLiteDatabase sqLiteDatabase,int i,int i1) {


    }
    public boolean insertUser (User user){
        SQLiteDatabase sqLiteDatabase=getWritableDatabase();
        ContentValues contentValues=new ContentValues();
        contentValues.put("EMAIL",user.getEmail());
        contentValues.put("Password",user.getPassword());
        contentValues.put("NAME",user.getName());
        contentValues.put("PHONE",user.getPhone());
        contentValues.put("GENDER",user.getGender());
        try {
            sqLiteDatabase.insert("USER",null,contentValues);
            return true;
        } catch (SQLException e) {
            e.printStackTrace();
            return false;
        }
    }
    public Cursor getAllUsers() {

        SQLiteDatabase sqLiteDatabase = getReadableDatabase();
        return sqLiteDatabase.rawQuery("SELECT * FROM USER ORDER BY EMAIL ASC",null); //set it to sort by name ascending
    }
    public void updateName(String newName,String email,String oldName,String newPassword,String oldPassword){
        SQLiteDatabase db = this.getWritableDatabase();
        String query = "UPDATE USER" + " SET " + "NAME" +
                " = '" + newName + "' WHERE " + "EMAIL" + " = '" + email + "'" +
                " AND " + "NAME" + " = '" + oldName + "'";
        Log.d(TAG,"updateName: query: " + query);
        Log.d(TAG,"updateName: Setting name to " + newName);
        db.execSQL(query);
        String query2 = "UPDATE USER" + " SET " + "Password" +
                " = '" + newPassword + "' WHERE " + "EMAIL" + " = '" + email + "'" +
                " AND " + "Password" + " = '" + oldPassword + "'";
        Log.d(TAG,"updateName: query: " + query2);
        Log.d(TAG,"updateName: Setting name to " + newPassword);
        db.execSQL(query);
    }

import { zip } from 'rxjs';
import { first } from 'rxjs/operators';

,

您可以使用forkJoin中的rxjs。

import { forkJoin } from 'rxjs';

component.ts

ngOnInit() {
  forkJoin([this.serv1.getData1Listener(),this.serv2.getData2Listener()]).subscribe(data => {
    this.data1 = data[0];
    this.data2 = data[1];

  });
}

, 在这种情况下，

forkJoin应该是最好的运算符。了解其他高阶运算符也同样重要，这将有助于知道何时使用它们。 例如

concatMap -帮助在等待先前的可观察对象完成的同时按顺序映射可观察对象。最好的用例是顺序保存表单。

mergeMap －帮助并行运行的可观察对象的映射。以前所有的Observable都保持活动状态。

switchMap -如果我们想取消以前的订阅，则可以使用switchMap。最好使用switchMap结合deboundTime（）和distinctUntilChanged（）来实现提前输入功能。

exhaustMap -用于忽略新发出的值，直到完成可观察到的为止。最适合在单击按钮保存数据时使用，该按钮有可能被多次单击。