RxJS Angular 如何动态访问数据答案

【问题标题】：RxJS Angular How to access data dynamicallyRxJS Angular 如何动态访问数据
【发布时间】：2020-01-17 17:13:26
【问题描述】：

我有两个组件和一个服务。 HomeComponent 是父组件，ContactComponent 是子组件，它有一个数组，其中包含两个联系人的两个元素。

但是，我有一个我想使用的 observable，我想存储 ContactComponent 返回的数据，并将它们放在 Home Component 的两个变量中。

这是我的代码：

服务

export class AppDataService {

  constructor() { }

  private data = new BehaviorSubject<string>("Home");

  //this is what your components subsribes to
  currentData() : Observable<string> {
     return this.data.asObservable();
  }

  //this function allows you to change the value to be accessed by other components
  changeData(message: string) {
    this.data.next(message);
  }
}

ContactComponent.ts

public contactsChanged = new Subject();
  public updatedContact:any;
  constructor(private contacts: Contacts, private storage: Storage, private appData : AppDataService) {
    this.getContact();
  }
  key = 'contacts';
 mContacts = [
   {
    id: 0,
    name: '',
    number: ''
   },
   {
    id: 1,
    name : '',
    number: ''
   }
  ];



  pickContact(contactId) {


    this.appData.currentData().subscribe((message:string) => this.updatedContact = message);   


    this.mContacts[contactId].name = "Mitchell";
    this.mContacts[contactId].number = (Math.random() * 0.5).toString();

    this.appData.changeData(this.mContacts[0].number);
    this.appData.changeData(this.mContacts[1].number);

     console.log("contactsChanged: " + this.mContacts[0].number);
     console.log("contactsChanged: " + this.mContacts[1].number);
 }

HomeComponent.ts

this.appData.currentData().subscribe((message:string) => {
      //here i log changes detected on the console
      console.log("i have changed " + message);     

      //you can perform any call or action here e.g
      //update a variable
      this.numberOne = message;
      this.numberTwo = message;
      //or call a function
      this.canCall();
  });

我想将第一个元素的数字存储在 numberOne 中，将第二个数字存储在 NumberTwo 中。但是显然这存储了相同的数字。

【问题讨论】：

如果您想发送 pairs 值，请将其更改为 Observable<[string, string]>。
能否说的更具体一些
好吧，目前你已经围绕Observable<string> 构建了所有东西，它一次发送一个值。现在你说你想处理 pairs 的值。所以发送tuple，Observable<[string, string]>，然后你会同时得到这两个值。

标签： angular typescript rxjs

【解决方案1】：

export class AppDataService {

  constructor() { }

  private data = new BehaviorSubject<any>([]); // or null, type any can be changed with a interface that follow ur contact object

  //this is what your components subsribes to
  currentData() : Observable<[string, string]> {
     return this.data.asObservable();
  }

  //this function allows you to change the value to be accessed by other components
  changeData(contact: [string, string]) {
    this.data.next(contact);
  }
}

public contactsChanged = new Subject();
  public updatedContact:any;
  constructor(private contacts: Contacts, private storage: Storage, private appData : AppDataService) {
    this.getContact();
  }
  key = 'contacts';
 mContacts = [
   {
    id: 0,
    name: '',
    number: ''
   },
   {
    id: 1,
    name : '',
    number: ''
   }
  ];



  pickContact(contactId) {


    this.appData.currentData().subscribe((message:[string, string]) => this.updatedContact = message);   


    this.mContacts[contactId].name = "Mitchell";
    this.mContacts[contactId].number = (Math.random() * 0.5).toString();

    this.appData.changeData([this.mContacts[0].number, this.mContacts[1].number]);

 }

this.appData.currentData().subscribe((contacts:[string, string]) => {
      //here i log changes detected on the console
      console.log("i have changed " + contacts);     

      //you can perform any call or action here e.g
      //update a variable
      this.numberOne = contacts[0];
      this.numberTwo = contacts[1];
  });

如果您想直接保存联系人的所有数据，也可以保存对象数组。

【讨论】：

为什么要这样做any？
可以是string[]或者contactsInterface[]
或者更明确地说是一个元组，正如我上面已经提到的，它也提供长度信息。如果您要使用 TypeScript，请使用 TypeScript。
如果该数组始终相同，则问题未放置相关信息，因此您不能使用元组。如果该数组是静态的，那么您是对的。
数组必须是静态的，我打算这样。安东尼，你的回答是正确的，但我也会发布我所拥有的，因为它也有效。

【解决方案2】：

应用数据服务

export class AppDataService {

  constructor() { }

  private data = new BehaviorSubject<[string,string]>(['Home','Home']);

  //this is what your components subsribes to
  currentData() : Observable<[string,string]> {
     return this.data.asObservable();
  }

  //this function allows you to change the value to be accessed by other components
  changeData(numberOne: string,numberTwo:string) {
    this.data.next([numberOne,numberTwo]);
  }
}

ContactComponent.ts

public contactsChanged = new Subject();
  public updatedContact = ['',''];

  constructor(private contacts: Contacts, private storage: Storage, private appData : AppDataService) {
    this.getContact();
  }
  key = 'contacts';
 mContacts = [
   {
    id: 0,
    name: '',
    number: ''
   },
   {
    id: 1,
    name : '',
    number: ''
   }
  ];



  pickContact(contactId) {

    this.appData.currentData().subscribe(([numberOne,numberTwo]) => 
    [this.updatedContact[0] = numberOne,this.updatedContact[1]=numberTwo]);             

    this.mContacts[contactId].name = "Mitchell";
    this.mContacts[contactId].number = (Math.random() * 0.5).toString();

   this.appData.changeData(this.mContacts[0].number,this.mContacts[1].number);

     console.log("contactsChanged: " + this.mContacts[1].number);


  }

HomeComponent.ts

this.appData.currentData().subscribe(([numberOne,numberTwo]) => {
      //here i log changes detected on the console
      console.log("HomeComponent NumberOne " + numberOne, "numberTwo" + numberTwo);     

      //you can perform any call or action here e.g
      //update a variable
      this.numberOne = numberOne;
      this.numberTwo = numberTwo;
      //or call a function
      this.canCall();
  });

【讨论】：