如何更新数据到md表？

Question

我开发与角4 web应用程序，但我有一个问题，因为我不知道如何获得新的数据，我md-table

我已复制了同样的例子我的应用程序

https://github.com/angular/material2/tree/master/src/material-examples/table-http

我有一个组件form和table-http组件，在我的表-httpComponent我有我的表单发送变量的@Input字段，但是当我调用表-Http没有问题时，这从表单正确接收数据并呈现数据，但是当我修改表单中的字段时，我按下按钮（提交）我c不会渲染table-http与发送新的@Input date字段。

在我的模板组件我有这个

<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate> 
    <div> 
    <md-input-container> 
     <input 
     mdInput 
     [mdDatepicker]="pickerInit" 
     placeholder="Fecha inicial" 
     name="init" 
     #init="ngModel" 
     ngModel 
     required> 
     <button mdSuffix [mdDatepickerToggle]="pickerInit"></button> 
    </md-input-container> 
    <md-datepicker #pickerInit></md-datepicker> 
    </div> 
    <div > 
    <button md-raised-button>Buscar</button> 
    </div> 
</form> 
<http-table *ngIf=active [date]=date></http-table> 

这是我onSubmit方法

onSubmit(f: NgForm) { 
    this.active = false; 
    if (!f.value["init"]) { 
    alert("Ingrese la fecha de inicio."); 
    return; 
    } 
    this.date = this.localISOTime(f.value["init"]); 
    this.active = true; 
    console.log("Form values -> ", f.value); //Here my data exists without problem 
} 

在我table-http组件我宣布我的领域@Input() date: Date

当我按下了按钮第一次没有问题，table-http呈现正确的数据，但是当我按下按钮t他第二次http-table不能用新数据重新加载。

我不明白为什么不用新数据重新加载。

UPDATE

这里添加我plunker，总之，我的问题是基于选择，例如日期和按下按钮（按第二次推进的时候，这在我的实际分量不不会发生，所以不用担心），通过控制台打印两次相同的日期，假设日期在我的服务中用于获取新数据，如果我更改日期并再次按下按钮不要重新打印此数据，并且从不更新我的表格。

https://plnkr.co/edit/80955I8GGis25hbpPBz5?p=preview

Answer 1

希望我理解你的问题，你的意思是，当日期在父母改变时，HTTP请求没有根据变化refired。

其实你不需要在孩子中的OnInit，因为我们不需要在组件初始化时触发任何东西。你想要做的是在孩子获得日期输入时触发。那么我们可以做的，就是利用ngOnChanges生命周期钩子，因为它可以监视@Input中的变化。所以，你可以删除OnInit儿童，而是做：

ngOnChanges() { 
    console.log("onchanges -> ", this.date); 
    this.exampleDatabase = new ExampleHttpDao(this.http, this.date) 
    this.dataSource = new ExampleDataSource(this.exampleDatabase); 
    this.ref.detectChanges() 
} 

显然也有一些变化检测问题，至少在plunker，所以我们增加了ChangeDetectorRef和手动触发变化检测与detectChanges()。

import {ChangeDetectorRef} from '@angular/core'; 

constructor(...., private ref: ChangeDetectorRef) { } 

在plunker你现在可以看到控制台日志fired!在HTTP请求时的日期更改。

你plunker：https://plnkr.co/edit/VQ6aKVeJfWy3S8JkD7YL?p=preview