Question

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

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

Answer 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

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

1 个答案: