我正在使用Angular 4开发网络应用,但我遇到了问题,因为我不了解如何访问md-table
我为我的应用程序重现了相同的例子
https://github.com/angular/material2/tree/master/src/material-examples/table-http
我有一个带有form
和table-http
组件的组件,在我的表中 - httpComponent我有@Input字段,其变量是从我的表单发送的,但是当我调用table-http没问题时,这个从表单正确接收数据并呈现数据,但是当我修改表单中的字段并按下按钮(提交)时,我无法通过发送新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
呈现正确的数据,但是当我第二次按下按钮时http-table
没有重新加载新数据。
我不明白为什么不重新加载新数据。
更新
这里我添加了我的plunker,简而言之,我的问题是基于当选择日期例如并按下按钮时(按第二次推进,这在我的真实组件中不会发生所以不要担心它),由控制台打印两次相同的日期,假设我的服务中使用了日期来获取新数据,如果我更改日期并再次按下按钮,请不要重新打印此数据,也不要更新我的表格。
答案 0 :(得分:1)
希望我理解你的问题,你的意思是当父母改变日期时,http请求不会在改变后被重新激活。
实际上,您不需要孩子中的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中,只要日期发生变化,您就可以在http请求中看到控制台日志fired!
。