title: Angular 5 processing results from a POST request
body: <p>I'm trying to convert an app from Angular 1.x to Angular 5.  The app makes a POST request to the server that responds with the results in the form of string, string and array.  Depending upon the value of the 2 strings I then need to use the array in a *ngFor loop to display the results.  This was very easy to achieve in Angular 1 using a factory to make the request and a then clause to break out the various parts of the response.</p>
  
  <pre><code>pageFactory.getDetails(getUrl, myDrawing)
      .then(
          function(response) {
              $scope.drawing = response.data.drawing;
              $scope.message = response.data.message;
              $scope.error = response.data.error;
              if ($scope.error != '') {
                      $scope.hide = false;
              }
              $scope.hide2 = false;
      });
  </code></pre>
  
  <p>I just can't find a way to anythin similar to this using Angular 5.  I can make the request in a service using an Observable and a subscribe clause to execute it. What I can't do is break out the 2 strings and the array.</p>
  
  <p>My service is :</p>
  
  <pre><code>import {Injectable} from '@angular/core';
  import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
  import {catchError, map, tap} from 'rxjs/operators';
  
  import {User} from './user';
  import {Observable} from 'rxjs/Observable';
  import {of} from 'rxjs/observable/of';
  
  const httpOptions = {
    headers: new HttpHeaders({'Content-Type': 'application/x-www-form-urlencoded'})
  };
  const usersUrl = 'http://aqp.rvw/processUsers.php';
  const formData: FormData = new FormData();
  formData.append('type', 'getAll');
  
  
  @Injectable()
  export class UserService {
    users: User[];
    constructor(
      private http: HttpClient) {}
    getUsers(): Observable&lt;object&gt; {
      return this.http.post(usersUrl, formData)
        .pipe(
        catchError(this.handleError('getUsers', []))
        );
    }
  </code></pre>
  
  <p>and main main component</p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {User} from '../user';
  
  import {UserService} from '../user.service';
  
  @Component({
    selector: 'app-users',
    templateUrl: './users.component.html',
    styleUrls: ['./users.component.css']
  })
  export class UsersComponent implements OnInit {
    users: User[];
    response: object;
    constructor(private userService: UserService) {}
  
    ngOnInit() {
      this.getUsers();
    }
  
    getUsers(): void {
      this.userService.getUsers()
        .subscribe(response =&gt; this.response = {message: response['message'], error: response['error'], users: response['users']});
    }
  }
  </code></pre>
  
  <p>My template is:</p>
  
  <pre><code>&lt;h2&gt;List of users&lt;/h2&gt;
  {{message}}
  &lt;ul class="users"&gt;
      &lt;li *ngFor="let user of users"&gt;{{user.user}}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My code displays without errors but I don't see a list in my HTML, just the headings.  What changes have I got to make to get this work properly?</p>