Question

我有3个组件（1个父组件和2个子组件），其中父级通过API从在线数据库中读取数据，并将其发送到显示它的Child2。 Child1提供了一个下拉列表，您可以选择添加到在线数据库中的选项。

当我从列表中添加内容时，它会更新我的数据库（我可以看到它使用phpMyadmin更新），但它不会更新我在child2组件中的视图。我的理解是，如果我订阅了一个observable，那个observable会检查DB的整个时间进行更改，当它发现更改时，它会通过它。但是当DB改变时没有任何反应。我已经设法在我的订阅上使用ngDoCheck来解决这个问题，但这一定是我能想到的最糟糕的修复。

我没有将我的API位置包含到我的私人服务器中，因为我觉得它们没有必要，因为现在也无法创建一个plunker。

父组件：

function fetch_1 ($id) {
  // ... fetch data based on the id
  return $results;
}

function fetch_2 ($id, &$fetch) {
  // ... fetch data based on the id
  $fetch = $results;
}

Child1

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());
    }
}

CHILD2

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)
             );         
  }

}

我在上周花了大量时间阅读关于更改检测的所有内容，以及我可以接受的订阅，并尝试了我所阅读的所有内容，但我并不接近解决方案......

Angular2新数据未在未经刷新的情况下显示在视图中

0 个答案: