布尔值不变答案

【问题标题】：Boolean value doesn't change布尔值不变
【发布时间】：2018-03-07 19:27:09
【问题描述】：

我有问题。在搜索了几个小时后，我找不到对此的解释。我想显示一个模式（来自primeNG）并在用户单击按钮时显示它。这个按钮（带有一个 id）调用我的 API REST 并带来信息，非常简单。我收到了信息，但是当模式应该显示时，这不会发生。

map.component.ts

export class MapComponent implements OnInit {

  public alteraciones: any[];
  public alteracion: any = {};
  display: boolean = false;
/*...*/
generateData(map: L.map) {
    const data: any[] = [];
    let marker: any;

    L.geoJson(this.alteraciones, {
      pointToLayer: (feature, latlng) => {
        marker = L.marker(latlng, {
          icon: this.getIconMarker(feature.properties.tipo_alteracion)
        });

        marker.on('click', (e) => {
          this.getInfoAlteracion(feature.properties.id_alteracion); // <==
        });
        data.push(marker);
      }
    });    
/*...*/

  }
/**...**/
getInfoAlteracion(id_alteracion: string) {
    this.mapService.getInfoAlteracion(id_alteracion).subscribe(
      result => {
        this.alteracion = result;
        console.log(this.alteracion); // < == Information OK
        this.display = true; // <== this variable should change but doesn't
      },
      err => console.log(err)
    );
  }

}

map.component.html

<p-dialog header="Info" [(visible)]="display" modal="modal" width="500" [responsive]="true">
<!--some code-->
  <p-footer>
    <button type="button" pButton icon="fa-close" (click)="display=false" label="Cerrar"></button>
  </p-footer>
</p-dialog>

但是，当我重新编译或关闭服务器时，显示变量的值会发生变化，它会向我显示模态。我找不到解释，有什么想法吗？

编辑

可能的冲突：

@asymmetrik/ngx-leaflet: 3.0.2

@asymmetrik/ngx-leaflet-markercluster: 1.0.0

编辑 2

我还添加了一个带有要更改的新变量的新标记，但也不起作用。在这一点上，我认为（我有 90% 的把握）这是component.ts 和component.html 之间的通信问题。

【问题讨论】：

试试：[visible]="display"（单向绑定）。
不，它也不起作用：/
如果你在设置this.display = true;之后加上console.log("display", this.display)，你看到正确的值了吗？如果您将Display: {{ display }} 放在模板中的某个位置（而不是模式中），那么该值是否正确？
试试：[attr.visible]="display"
当我重新分配变量时，console.log 和 {{display}} 都显示“假”。只有当我重新编译或关闭服务器时，就在一切停止之前，值才变为'true'

标签： html angular typescript boolean primeng

【解决方案1】：

尝试公开该布尔显示属性！

【讨论】：

我在发布这个问题之前尝试过，不起作用:(
实现看起来不错，正如您所说，在服务器停止之前该值正在发生变化，而不是我认为您的项目设置或 API 获取端的某些问题（如订阅者不是）解决它应该做的方式。需要从这两个方面进一步调试。

【解决方案2】：

终于解决了这个问题。感谢这个link，我意识到这是库之间的兼容性问题。 Leaflet 事件处理程序在 Angular 的区域之外运行，不会自动检测到输入绑定字段的更改。为了确保检测到并应用我的更改，我需要在 Angular 的区域内进行更改。最后，将其添加到代码中，一切正常：

constructor(private mapService: MapService, private zone: NgZone) { }

 marker.on('click', (e) => {
          this.zone.run(() => {
            this.getInfoAlteracion(feature.properties.id_alteracion);
          });
        });
        data.push(marker);
      }

感谢大家的帮助！

【讨论】：