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

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 过程修改 BodyComponent 中定义的 oportunidades_filtradas 变量。到目前为止，一切正常。

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

变量 oportunidades_filtradas 绑定(bind)到 TableComponent 中的 oportunidades 变量(如 BodyComponent html 中所示)，当 items_filtered_by_polygon 方法更改 oportunidades_filtradas 时，不会触发 @Input() set oportunidades(oportunidades: Item[])。因此，我的 TableComponent 中没有显示任何更改。

当应用程序启动并通过组件分发数据时，一切都按预期进行。就在这种情况下，当尝试按照说明修改 TableComponent 内容时，没有任何反应。

在chrome的devtools控制台，没有报错。而且app的流程也不觉得奇怪，就是什么都没发生。有时，我们认为修改正在进行中，但也许它们延迟得很厉害？也许是某种异步问题？

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

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

Answer 1

这听起来可能发生了变化检测问题。根据您的变更检测策略，这样的事情可能会发生。尝试使用 ChangeDetectorRef.detectChanges()在您的 items_filtered_by_polygon 函数中查看是否是问题所在。如果它有效，您可以将它留在那里或将其删除，并对未触发的输入使用可观察对象。