Angular 角度变量未刷新（未在模板中正确显示）

有两个组件：

图形

，

节点

和1个服务：

nodesmanager

nodesmanager

被注入到

graph

当

图形

组件检测到鼠标点击事件时，注入的服务

节点管理器

通过调用函数

AddNode

，调用

n.setPos（22,44）

，并将

n

添加到节点列表

节点

setPos

应更改

节点的两个变量：
posX
和
posY

然后模板
node.html
应该“echo”posX:
{{posX}

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

nodesmanager.service.ts：

node.ts：

node.html（模板）：

graph.html（模板）：

从NodeComponent类中删除SetPos

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

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>


这并没有解决问题。谢谢在SetPos方法中添加一个console.log来查看它得到了什么。当你说你没有得到任何东西时，你是否至少在输出中看到了“p:”？另外，如果这是NodeComponent类的完整签名，我觉得你可以通过使用一个构造函数将这两个属性定义为public来简化它。然后可以删除SetPos方法和两个输入。1-是，在浏览器中打印字母“p”。2-在
setPos
函数中执行
console.log（this.posX）
，在控制台中打印
posX
（22）的正确值。但是问题仍然存在于tempale中，它只打印“p:”就像1中所说的那样，让
NodeComponent
的构造函数获取这两个属性，在
graph.html
中使用其模板创建新的
NodeComponent
时会产生问题（执行
）。我似乎不知道如何创建一个在构造函数中使用参数的组件，使用它的模板。
<div>
    p: {{posX}}
</div>

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

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

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>