Angular变量未刷新未在模板中正确显示

问题描述

有2个组成部分：graph，node 和1个服务：nodesmanager

nodesmanager被注入到graph

当graph组件检测到鼠标单击事件时，注入的服务nodesmanager通过调用函数n创建新节点AddNode，调用n.setPos (22,44) ，然后将n添加到节点nodes的列表中。

setPos应该更改node的2个变量：posX和posY。

然后模板node.html应该“回显” posX：{{posX}}

但是问题是{{posX}}没有显示在setPos之后更改的posX的值，没有显示任何内容。它正在考虑posX未定义。

nodesmanager.service.ts：

@H_404_60@@input() nodes: NodeComponent [] = [] ; constructor() { } AddNode (x: number,y: number): void { let n = new NodeComponent (); n.SetPos(22,44); this.nodes.push (n); }

node.ts：

@H_404_60@@input() posX: number; @input() posY: number; constructor(){} SetPos (_posX: number,_posY: number): void{ this.posX = _posX; this.posY = _posY; } ngOnInit() {}

node.html（模板）：

@H_404_60@<div> p: {{posX}} </div>

graph.ts：

@H_404_60@constructor(public nodesManager: NodesManagerService) { } ngOnInit() {} MouseClicked (event: MouseEvent) : void { this.nodesManager.AddNode(event.clientX,event.clientY); }

graph.html（模板）：

@H_404_60@<div class="graph" (click) = "MouseClicked($event)"> <div *ngIf="nodesManager.nodes"> <div *ngFor = "let node of nodesManager.nodes"> <app-node></app-node> </div> </div> </div>

解决方法

从NodeComponent类中删除SetPos

将nodesmanager服务更改为仅保留数据

public nodes: any[] = [] ;
constructor() { }
  
AddNode (x: number,y: number): void {
    this.nodes.push ({x,y});
}

更改模板

<div class="graph" (click)="MouseClicked($event)">
    <div *ngIf="nodesManager.nodes">
        <div *ngFor="let node of nodesManager.nodes">
            <app-node [posX]="node.x" [posy]="node.y"></app-node>
        </div>
    </div>
</div>