Question

我在Angular EventEmitter和angular @Input方面遇到了一些问题。

我的应用有3个组件：2个组件（TableComponent和MapComponent），它们之间不进行交互，还有一个额外的组件，就像那两个组件的父亲一样（BodyComponent）

TableComponent定义以下@Input

  _oportunidades: Item[];
  @Input() set oportunidades(oportunidades: Item[]){
    debugger;
    this._oportunidades = oportunidades;
    this.dataSource = new MatTableDataSource<Item>(this._oportunidades);
    this.dataSource.paginator = this.paginator;
  }

MapComponent定义：

 @Output() event_emitter_for_items_filtered_by_polygon = new EventEmitter<string[]>();
  send_new_map_information_to_body(){
    this.event_emitter_for_items_filtered_by_polygon.emit(this.items_filtered_by_polygon);
  }

  add_function_that_sends_filtered_items_to_body_after_polygon_is_draw(){
    var self = this;
    google.maps.event.addListener(this.drawingManager, 'polygoncomplete', function(polygon) {
      self.filter_items_by_polygon(polygon);
      self.remove_markers_from_map();
      polygon.setPath([])
      self.send_new_map_information_to_body();
    });
  }

触发程序send_new_map_information_to_body时。将修改后的数据发送到BodyComponent。 BodyComponent抓住没有错误。此处显示BodyComponent html：

<div class="analysis">
  <app-mapa (event_emitter_for_items_filtered_by_polygon)="items_filtered_by_polygon($event)" [items]="map_data"></app-mapa>
  <app-tabla [oportunidades]="oportunidades_filtradas"></app-tabla>
</div>

程序items_filtered_by_polygon修改了oportunidades_filtradas中定义的BodyComponent变量。到现在为止，一切都还可以。

  items_filtered_by_polygon($event){
    this.oportunidades_filtradas = []
  }

当oportunidades_filtradas方法更改时，变量oportunidades被绑定到TableComponent中的BodyComponent变量（如items_filtered_by_polygon html中所示）{{ 1}} oportunidades_filtradas未被触发。因此，我的@Input() set oportunidades(oportunidades: Item[])中未显示任何更改。

当应用程序启动并且数据通过组件分发时，一切都按预期工作。就这种情况而言，当尝试按照解释修改TableComponent内容时，没有任何反应。

在chrome的devtools控制台中，没有显示错误。应用程序的流程并不奇怪，只是没有任何反应。有时候，我们认为修改工作已经完成，但也许它们可能会延迟？也许是某种异步问题？

我是Angular的新人，也许我不理解某些东西。我的应用程序中的所有其他绑定都在工作......

你怎么看？欢迎任何帮助！谢谢！

Answer 1

这听起来可能会发生变化检测问题。根据您的变更检测策略，可能会发生这样的事情。尝试在items_filtered_by_polygon函数中使用ChangeDetectorRef.detectChanges()来查看问题是否存在。如果它有效，你可以把它留在那里或删除它并使用一个observable来输入不会触发。

角度绑定@input行为无法正常工作

1 个答案: