1

我试图通过@ViewChild() 获取输入字段的值。然而，即使它似乎有效，这个方法还是触发了应用程序的意外刷新：

-单击触发事件的按钮后立即刷新应用程序

- 使用导航栏浏览应用程序时应用程序刷新一次

模板：

<input type="text" id="name" class="form-control" #nameInput>
<button class="btn btn-success" type="submit" (click)="addShop()">Add</button>
<p>{{shopName}}</p>

组件.ts：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-shopping-edit',
  templateUrl: './shopping-edit.component.html',
  styleUrls: ['./shopping-edit.component.css']
})
export class ShoppingEditComponent implements OnInit {
@ViewChild('nameInput') shopName:ElementRef;
@ViewChild('amountInput') shopAmount:ElementRef;

coucou:string;


addShop(){
    this.shopName = this.shopName.nativeElement.value;
}

  constructor() { }

  ngOnInit() {
  }
}
4

2 回答 2

2

删除按钮中的 type="submit"，只需将其替换为 type="button"

更改以下行：

<button class="btn btn-success" type="submit" (click)="addShop()">Add</button>

至：

<button class="btn btn-success" type="button" (click)="addShop()">Add</button>

浏览器认为您正在提交表单，这就是它刷新页面的原因

于 2017-09-19T14:17:53.330 回答
1

当按钮类型在 a 中提交时form，在表单submit事件中它会尝试点击action表单级别提供的（属性）。如果 没有 action 属性form，则刷新页面。要停止此行为，您可以将按钮更改type为button（仅通过删除type属性不会解决问题，隐式按钮具有submit类型）。

<button class="btn btn-success" type="button" (click)="addShop()">Add</button>

在角度世界中，您应该(ngSumbit)="submit()"在级别上使用事件，form然后您可以将按钮类型保持为submit. 在幕后表单事件被事件抑制ngSubmit。您可以从ngSubmit事件中指定的函数进行 ajax 调用。

标记

<form (ngSubmit)="addShop()" #heroForm="ngForm">
  <input type="text" id="name" class="form-control">
  <button class="btn btn-success" type="submit">Add</button>
  <p>{{shopName}}</p> 
</form>
于 2017-09-19T14:18:36.093 回答