Question

我正在尝试将数据发布到我的REST服务器。当我使用（更改）它会将数据发送到我的其余服务器。当我尝试激活按钮上的方法时，它甚至没有尝试进行POST调用。我怎么解决这个问题？我什么都找不到。

HTML文件：

<div class="container py-5">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-6 mx-auto">
          <div class="card rounded-0">
            <div class="card-header">
              <h3 class="mb-0">Organize</h3>
            </div>
            <div class="form-group">
              <label for="codes" class="m-2">Choose a restaurant:</label>
              <form #f="ngForm">
                <input 
                  type="text" 
                  list="codes" 
                  class="m-2"
                  (change)="saveCode($event)">
                <datalist id="codes">
                  <option *ngFor="let c of codeList" [value]="c.name">{{c.name}}</option>
                </datalist>
              </form>
              <button 
                type="submit" 
                class="btn btn-primary btn-lg float-none m-2" 
                id="btnAanmaken"
                routerLink="/menu"
                (change)="saveCode($event)"
                >Aanmaken</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

打字稿文件：

// Method to post data to backend
  public saveCode(e): void {
    const name = e.target.value;
    const list = this.codeList.filter(x => x.name === name)[0];


    this.restaurant.name = list.name;
    this.restaurant.address = list.address;

    console.log(list.name);
    console.log(list.address);


// Additional information to the server content type
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })
    };
// Making an array with the values of the restaurant
    const data = {
      name: list.name,
      address: list.address
    };

    console.log(data);

// POST method
    this.http.post('http://localhost:8080/aquadine-jee/resources/restaurant',
      JSON.parse(JSON.stringify(data)) , httpOptions)

    // wait till it gets posted to the backend
      .subscribe( // subscribe to observable http.post
        res => {
          console.log("response" + " " + res); // log results otherwise log error
        },
        err => {
          console.log('Error occured');
        }
      );
  }

我尝试通过以下方式调用该方法：

<button 
                type="submit" 
                class="btn btn-primary btn-lg float-none m-2" 
                id="btnAanmaken"
                routerLink="/menu"
                (change)="saveCode($event)"
                >Aanmaken</button>

和：

<button 
                type="submit" 
                class="btn btn-primary btn-lg float-none m-2" 
                id="btnAanmaken"
                routerLink="/menu"
                (click)="saveCode($event)"
                >Aanmaken</button>

Answer 1

使用routerLink routerLink="/menu"并单击事件发生冲突。

在回复时更改路由。

注入router: Router类并使用this.router.navigateByUrl(url: string) Router

 constructor(private router: Router){
  }


  public saveCode(e): void{
    // POST method
    this.http.post('http://localhost:8080/aquadine-jee/resources/restaurant',
      JSON.parse(JSON.stringify(data)) , httpOptions)

    // wait till it gets posted to the backend
      .subscribe( // subscribe to observable http.post
        res => {
          console.log("response" + " " + res); // log results otherwise log error

          this.router.navigateByUrl("/menu")
        },
        err => {
          console.log('Error occured');
        }
      );
  }

Answer 2

除了@Moslem的回答，还将按钮类型从submit更改为button

<button type="button" .. > instead of <button type="submit" ...>

Angular如何使用（更改）检测器通过按钮发布数据？

2 个答案: