javascript - Angular 绑定(bind)@input行为无法正常工作

我在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 html中所示），当items_filtered_by_polygon方法更改oportunidades_filtradas时，不会触发@Input() set oportunidades(oportunidades: Item[])。因此，我的TableComponent中没有显示任何更改。

当应用启动并通过组件分发数据时，一切都会按预期进行。只是在这种情况下，当尝试按说明修改TableComponent内容时，什么也没有发生。

在chrome的devtools控制台中，未显示任何错误。应用程序的流程并不奇怪，什么也没发生。
有时，我们以为修改已完成，但可能延迟太晚了？也许是某种异步问题？

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

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

最佳答案

听起来好像发生了更改检测问题。根据您的变更检测策略，可能会发生这种情况。尝试在items_filtered_by_polygon函数中使用ChangeDetectorRef.detectChanges()来查看是否存在此问题。如果可行，您可以将其保留或删除，然后将observable用于未触发的输入。

关于javascript - Angular 绑定(bind)@input行为无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48172480/