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

如何解决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：

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

node.ts：

@input()  posX: number;
@input()  posY: number;

constructor(){}

SetPos (_posX: number,_posY: number): void{
    this.posX = _posX;
    this.posY = _posY;
    
}

ngOnInit() {}

node.html（模板）：

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

graph.ts：

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

graph.html（模板）：

<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>