javascript - Angular 变量未更新

Question

我正在尝试创建一个 Angular 应用程序来在 map 上放置标记。当您单击 map 时，一个函数会生成标记并打开一个表单，然后另一个函数会记录位置。您在表单中输入描述，然后在提交时，表单会更新 json 数据库。我遇到的问题是我无法更新位置信息。

HTML:

  <div class="jumbotron" id="map container" style="position: relative">
    <h1>Map in Angular</h1>

    <!--Map image-->
    <div (click)="logCursorPosition(e)" (click)="getCursorPositionX(e)" (click)="getCursorPositionY(e)" ></div>
    <img id="map" src="../assets/img/summonersRift.jpg" width="960" height="540" >
  </div>

<!--form appears on marker placement-->
<div class="form-popup" id="myForm">
  <form class="form-container" #mapMarker="ngForm" (ngSubmit)="markerFormSubmit(mapMarker.value)">
    <input type="text"   class="form-control" placeholder="Enter Description" name="description" ngModel>
    <button type="submit" class="btn btn-sm">Submit</button>
    <button type="button" class="btn cancel btn-sm" (click)="closeForm()">Close</button>
    <button type="button" class="btn delete btn-sm">Delete</button>
  </form>
</div>

ts 文件:

import { Component, OnInit, AfterViewInit} from '@angular/core';
import { DndDatabaseService } from './dnd-database.service';
import { HttpClient } from '@angular/common/http';
import { FormsModule }   from '@angular/forms';
import { markerData } from './markerData';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'map-app';

  constructor(private dndDatabaseService: DndDatabaseService,
              private httpClient: HttpClient,
              private http: HttpClient){};

  iconDescription:Object={};
  xPosition:Object={};
  yPosition:Object={};







  ngOnInit(){
      const iconImage = new Image();
      iconImage.src = "../assets/img/marker.jpg"

      //subscribes to the JSON file
      this.httpClient.get<markerData[]>('http://localhost:3000/mapMarker')
      .subscribe(posts => {
          posts.forEach(post=>{
                setMarker(post)})})      

      //Generate the markers from the json data
      function setMarker(post){
        console.log("function started", post.id)
        var x = post.xPos;
        var y = post.yPos;
        var img = document.createElement("img");
        img.src = "../assets/img/marker.jpg";
        img.width = 20;
        img.height= 20;
        img.style.position="absolute";
        img.style.left= (x-20)+'px';
        img.style.top=(y-40)+'px';
        document.getElementById('map container').appendChild(img);
      }

      //Listen for map events
      var map = document.getElementById('map')
      map.addEventListener("click", this.logCursorPosition);
      map.addEventListener("click", this.getCursorPositionX);
      map.addEventListener("click", this.getCursorPositionY);



  }

  getCursorPositionX(e){
    var x = (e.clientX)-20;
    //console.log("x:", x)
    this.xPosition = {"x": x};
    return this.xPosition
  }

  getCursorPositionY(e){
    var y = (e.clientY)-40;
    //console.log("y:", y)
    this.yPosition = {"y": y};
    return this.yPosition
  }

  logCursorPosition(e){
      //Get Cursor Location
      var x = e.clientX;
      var y = e.clientY;
      console.log("X Position "+ x + " Y Position" +y);
      //Place Icon
      var img = document.createElement("img");
      img.src = "../assets/img/marker.jpg";
      img.width = 20;
      img.height= 20;
      img.style.position="absolute";
      img.style.left= (x-20)+'px';
      img.style.top=(y-40)+'px';
      document.getElementById('map container').appendChild(img);
      img.id="currentMarker"
      //Open Form
      document.getElementById("myForm").style.display = "block"; //Opens the form
      document.getElementById('myForm').style.top = y +'px'; // sets the form y coordinate
      document.getElementById('myForm').style.left = x +'px'; // sets the form x coordinate
  }

//function that opens and closes the form for the icons
closeForm() {
  document.getElementById("myForm").style.display = "none";
}


  markerFormSubmit(marker){
      this.iconDescription ={
        "description": marker.description,
        "xPos":this.xPosition,
        "yPos":this.yPosition,
      }
    this.http.post("http://localhost:3000/mapMarker", this.iconDescription).subscribe((po:Response) => {console.log("po",po)})
    document.getElementById("myForm").style.display = "none";
    alert("Successfully Added")
  }
}

数据库文件

{
  ],
  "mapMarker": [
    {
      "description": "Example",
      "xPos": 450,
      "yPos": 450,
      "id": 1
    },
    {
      "description": "middle",
      "id": 2
    }
  ]
}

Answer 1

您可以将项目保存在 localStorage 中。例如，您可以在此处将 xPosition 设置为 x:

getCursorPositionX(e){
    var x = (e.clientX)-20;
    localStorage.setItem("xPosition", x)
}

然后你可以在需要的时候再次调用它:

markerFormSubmit(marker){
  this.iconDescription ={
    "description": marker.description,
    "xPos": localStorage.getItem("xPosition"),
    "yPos": localStorage.getItem("yPosition"),
  }
this.http.post("http://localhost:3000/mapMarker", 
this.iconDescription).subscribe((po:Response) => 
    {console.log("po",po)})
document.getElementById("myForm").style.display = "none";
alert("Successfully Added")

}

希望这有帮助!