Component

component.html

<div *ngFor="let item of data | async">
  {{ item.data }}
</div>

component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { Http, Response, } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';

@Component({
  moduleId: module.id,
  selector: 'registration',
  templateUrl: 'registration.component.html'
})

export class registrationComponent { 
   emailRegex = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;

  data$: Observable<any>; // <-- I changed this
  result$;
  data: any[];
   
 registration : FormGroup;
 constructor(r: FormBuilder, public  http :Http){

    this.registration = r.group({
      'chosen_username' : [null, Validators.required],
      'chosen_email' : [null, Validators.pattern(this.emailRegex)],
      'chosen_password' : [null, Validators.required],
      });
  }

  submitForm(){
    
    const headers = new Headers();
    headers.append('Content-Type', 'application/joson; charset=utf-8' );

    this.data$ = this.http.get('/scripts/php/formsubmit.php', JSON.stringify(this.registration.value), headers)
                            .map((res:Response) => res.json());
    this.result$ = this.data$.subscribe(
                                   data => this.data = data, //Bind to view
                                    err => {
                                        // Log errors if any
                                        console.log(err);
                                    });
  }

}