Angular2 new data not showing in view without being refreshed

Question

I have 3 components (1 parent and 2 children) where the parent reads data form a online database via API, and sends it to Child2 which displays it. Child1 gives a drop down list of options that you can pick to add to the online database.

When I add something from the list, it updates my database (I can see it updated with phpMyadmin), but it does not update my view in the child2 component. My understanding is that if I subscribe to an observable, that observable will check the DB the whole time for changes, and when it finds changes it will give it through. But nothing happens when the DB changes. I have managed to work around this problem with ngDoCheck on my subscription, but this must be the worst fix that I can think of.

I did not include my API locations to my private server for I did not think them necessary, unable to create a plunker also because of this now.

Parent component:

import { Component, OnInit, Input } from '@angular/core';
import { Http } from '@angular/http';
import { DailyBatches } from './newinter';

@Component({
selector: 'parent',
template: `
    <div>
        <child1[data]="Choise"></child1>
        <child2[data2]="data"></child2>
    </div>
`
})

export class ParentComponent implements OnInit {

Choise = [
    { batch_name: "SV"}, 
    { batch_name: "SS"}, 
    { batch_name: "ER"}, 
    { batch_name: "RG"}, 
    { batch_name: "BG"}
];

data: DailyBatches[];

constructor(private _http: Http) { }

ngOnInit() { 
    this.checkDB();
}

checkDB(){
    this.DailyBatch()
        .subscribe(dailyBatch => this.data=dailyBatch['records']);
}

// -------------------------- Only works if I add the following ---------------
    //ngDoCheck() {
    //  this.checkDB();
    //}

    DailyBatch() {
        const url = 'http://private_API_here.php';
        return this._http.get(url)
            .map(x => x.json());
    }
}

Child1

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ApiService } from '../../services/api.service';

@Component({
  selector: 'child1',
  template: `

<div>
    <form [formGroup]="addBatchForm" (ngSubmit)="addBatchNow()">
        <div class="form-group">
            <select type="text" formControlName="batch" >
                <option *ngFor="let batch of data" value="{{batch.batch_name}}">
                    {{batch.batch_name}}
                </option>
            </select>
        </div>

        <button type="submit" >Create</button>

    </form>
</div>
`
})
export class Child1Component implements OnInit {

  addBatchForm: FormGroup;
  @Input() data: string;

  constructor(private _apiService:ApiService, private fb: FormBuilder) {
    this.buildForm(); 
  }

  ngOnInit() {

  }

  buildForm() {
    this.addBatchForm = this.fb.group({
        'batch': ['', [Validators.required]],
    });
  }

  addBatchNow(){
        this._apiService.addBatch(this.addBatchForm.value)
            .subscribe(
                 batch => {
                    console.log(batch);
                 },
                 error => console.log(error)
             );         
  }

}

Child2

import { Component, OnInit, Input } from '@angular/core';
import { DailyBatches } from './newinter';


@Component({
  selector: 'child2',
  template: `
        <table>
            <tr *ngFor="let dbatch of data2">
                <td>{{dbatch.batch}}</td>
            </tr>
        </table>

  `
})
export class Child2Component implements OnInit {

@Input() data2:DailyBatches[];

  constructor() { }

  ngOnInit() {
  }

}

I have spend the last week reading everything I can about change detection, and subscriptions that I can get my hands on, and have tried everything I read, but I am no closer to a solution...