为什么(点击)不(点击)在里面发送我的数据<button>，但(更改)在<input>Angular，HTML

Question

我想将一些数据发送到我的Glassfish Restful服务器。当我在输入标签中使用(更改(时，它会激活该方法并成功发送数据，但是当我使用(单击(或(更改(激活该方法时，它无能为力。我试图将发送数据方法和路由器方法分开，但无济于事。 我该如何解决？

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>
              <button
                type="button"
                class="btn btn-primary btn-lg float-none m-2"
                id="btnAanmaken"
                (click)="routerRed()"
              >Aanmaken</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

打字稿文件：

import {Component, OnInit, ViewChild} from '@angular/core';
import {Router} from "@angular/router";
import {NgForm} from "@angular/forms";
import {HttpClient, HttpHeaders} from "@angular/common/http";
@Component({
  selector: 'app-organize',
  templateUrl: './sendinvite.component.html',
  styleUrls: ['./sendinvite.component.css']
})
export class SendinviteComponent implements OnInit {
  // public codeValue: string;
  // List of restaurants
  codeList = [
    { name: 'Mcdonalds', address: 'Kalverstraat 5' },
    { name: 'Kentucky Fried Chicken', address: 'Kalverstraat 4' },
    { name: 'Burger King', address: 'Kalverstraat 3' },
    { name: 'Dominos pizza', address: 'Kalverstraat 2' },
    { name: 'New York Pizza', address: 'Kalverstraat 1' }
  ];
// Assign empty value to id, name and address
  @ViewChild('f', { static: true }) form: NgForm;

  restaurant = {
    name: ' ',
    address: ' '
  };
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      Authorization: 'my-auth-token'
    })
  };

  constructor(private http: HttpClient, private router: Router) {
  }
  ngOnInit() {
  }
// 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');
        }
      );

  }
  routerRed(){
    this.router.navigateByUrl('/menu');
  }

我尝试使用：

<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

按钮内的 (change)事件将什么都不做， (click)更适合，但是在点击事件内传递的 $event将返回有关点击本身的信息(鼠标位置， ETC(。

您应该做的是，每当调用单击时，都会获取表单的值并将其发送到saveData函数。(也许通过做saveData(this.f.value)之类的事情，但我无法肯定地说(

我没有模板驱动形式的经验，也许您值得您看反应性形式，这将使您的生活更轻松

(change)事件不会在按钮的单击按钮上触发，因为没有这样的"更改"。您应该使用(click)。当您设置routerLink和(click)时未调用saveCode()的原因是由于routerLink。单击按钮时，Angular在触发您的点击事件之前将导航到/menu。您可以从saveCode()中的组件导航。

由于您在saveCode()中也有一个API调用，因此如果您在成功中导航可能会更好，因为如果API呼叫失败，则重新列入用户可能没有意义(尤其是如果新路由取决于新路线保存数据(

在您的代码中尝试一下。

html

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

组件

.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');
  });

edit ：您可以使用与NGModel一起在代码中使用的ngForm使用$event将值传递给组件。

。

组件

<input type="text"
  list="codes"
  class="m-2"
  name="restaurantName"
  ngModel
>

组件

  @ViewChild('f', { static: true }) form: NgForm;
  ...
  public saveCode (): void {
    const name = this.form.value.restaurantName;
    ...
  }

这是文档中有关如何使用ngform和ngmodel

将值绑定到表单的另一个示例