title: Passing Array of Object via an Observable
body: <p>I have a simple prototype form, which consists of two components (search and result) and a service (query).</p>
  
  <p>To summarise briefly before I get into detail, I would like an action on the search component to update data in the results pane.  </p>
  
  <p>In my prototype posted below this works with a simple String.  I can type a string into an input box and every time I click submit this calls the service setting the value (calling service.setData), the results component observes that its changed and updated the label accordingly.  I've tried doing the same with an array of an object, but whatever I try it refuses to update in real time.  It will work on the initial load though.  I have added the service into the providers.</p>
  
  <p>search.component.html - as this is a simple test, this has two buttons which call slightly different methods.</p>
  
  <pre><code>Set data to:
  
  &lt;input [(ngModel)]="searchTerm" placeholder="Enter data here"/&gt;
  
  &lt;button (click)="getSearchResults1(searchTerm); searchTerm=''"&gt;Submit 1&lt;/button&gt;
  &lt;button (click)="getSearchResults2(searchTerm); searchTerm=''"&gt;Submit 2&lt;/button&gt;
  </code></pre>
  
  <p>search.component.ts</p>
  
  <pre><code>  constructor(private queryService: QueryService) {}
  
    getSearchResults1(searchTerm: string):void {    
      this.queryService.setAccountData1();
      this.queryService.setData(searchTerm);
    }
  
    getSearchResults2(searchTerm: string):void {
      this.queryService.setAccountData2();
      this.queryService.setData(searchTerm);
    }
  
    ngOnInit() {  
      this.queryService.setAccountData3();
    }
  </code></pre>
  
  <p>query.service.ts</p>
  
  <pre><code>constructor(private http: HttpClient) { }
  
    private data: BehaviorSubject&lt;string&gt; = new BehaviorSubject(null);
  
    getData(): Observable&lt;string&gt; {
      return this.data;
    }
  
    setData(d: string): void {
      this.data.next(d);
    }
  
    ////////////////////////////////////////////////
  
    private accountData: Observable&lt;Account[]&gt; = new Observable(null);
  
    private accountUrl = 'assets/accounts.json';
    private accountUrl2 = 'assets/accounts2.json';
    private accountUrl3 = 'assets/accounts3.json';
  
    getAccountData(): Observable&lt;Account[]&gt; {
      return this.accountData;
    }
  
    setAccountData1(): void {
      this.accountData = this.http.get&lt;Account[]&gt;(this.accountUrl)
    }
    setAccountData2(): void {
      this.accountData = this.http.get&lt;Account[]&gt;(this.accountUrl2)
    }
    setAccountData3(): void {
      this.accountData = this.http.get&lt;Account[]&gt;(this.accountUrl3)
    }
  </code></pre>
  
  <p>results.component.html - the string version at the top works fine, the two slightly different versions of trying to do this with an array of an object both fail.  </p>
  
  <pre><code>The new value is: &lt;br /&gt;
  
  &lt;div&gt;{{data|async}}&lt;/div&gt;
  
  &lt;br /&gt;&lt;hr /&gt;&lt;br /&gt;
  
  Array is: &lt;br /&gt;
  
  &lt;ul class="search-result"&gt;
      &lt;li *ngFor="let account of accountData|async" &gt;
  
          {{account.firstName}}
  
      &lt;/li&gt;
    &lt;/ul&gt; 
  
    &lt;ul class="search-result"&gt;
      &lt;li *ngFor="let account2 of accountData2" &gt;
  
          {{account2.firstName}}
  
      &lt;/li&gt;
    &lt;/ul&gt; 
  </code></pre>
  
  <p>results.component.ts</p>
  
  <pre><code>  constructor(private queryService: QueryService) {}
  
    data: Observable&lt;string&gt;;    
    accountData: Observable&lt;Account[]&gt;;    
    accountData2: Account[];
  
    ngOnInit() {
  
      this.data = this.queryService.getData();
  
      this.accountData = this.queryService.getAccountData();
  
      this.queryService.getAccountData().subscribe(a =&gt; this.accountData2 = a);
  
    }
  </code></pre>
  
  <p>1) When the page first loads, the Onit of the search components loads the setAccountData3, which displays a list of firstnames in the third dataset of accounts.</p>
  
  <p>2) I type in a string value into the input box on the search component and click either button, the string value will be outputted on the results component in real time.</p>
  
  <p>3) The array of object doesn't update on either button.  Both submit buttons use a slightly different method of updating the array.  I can tell from outputting to the console that the array value is being set, but the result component does not see this action like it does with almost the same coding on the string version.</p>
  
  <p>Edit.................
  To confirm this is a simple prototype to test out the principles that I will need in later projects.  I know in this particular instance I could simplify the solution to achieve the results I want.  I especially would like a component to 'listen' for changes in a service and act upon it, this works for strings easily enough but i can't get it working for an array of objects.</p>