如何将数据更新到md-table?

时间:2017-07-31 11:08:15

标签: forms angular

我正在使用Angular 4开发网络应用,但我遇到了问题,因为我不了解如何访问md-table

中的新数据

我为我的应用程序重现了相同的例子

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

我有一个带有formtable-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,简而言之,我的问题是基于当选择日期例如并按下按钮时(按第二次推进,这在我的真实组件中不会发生所以不要担心它),由控制台打印两次相同的日期,假设我的服务中使用了日期来获取新数据,如果我更改日期并再次按下按钮,请不要重新打印此数据,也不要更新我的表格。

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

1 个答案:

答案 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!

你的掠夺者:https://plnkr.co/edit/VQ6aKVeJfWy3S8JkD7YL?p=preview