代码之家 › 专栏 › 技术社区 › Florent Arlandis

角度4:ViewChild()意外刷新应用程序

viewchild data-binding dom angular

Florent Arlandis · 技术社区 · 7 年前

我试图通过@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() {
  }
}

2 回复 | 直到 7 年前

FAISAL 7 年前

删除按钮中的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>

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

Pankaj Parkar 7 年前

form ,在表单上 submit 它试图击中的事件 action 类型 ,刷新页面。要停止这种行为,您可以更改按钮 type 到 button 提交 类型)。

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

(ngSumbit)="submit()" 上的事件 类型 提交 ngSubmit 事件您可以从上指定的函数进行ajax调用 ngSubmit提交

<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>

推荐文章

imcoding · img src属性上的vuejs数据绑定出现404错误

3 年前

user3237736 · JavaFX TreeView-在基础数据更改时重新绘制节点

3 年前

Christian · 角度材质垫按钮切换组数据绑定不工作

3 年前

Drarig29 · 将堆栈(可以切换)绑定到列表框

6 年前

Xsayar · 如何将两个命令绑定到WPF按钮?

6 年前

Infii · 带有自定义数据模板的水平ListView

6 年前

knutter539 · WPF数据绑定链接文本块文本到组合框选择

7 年前

Mark Denom · 我的数据绑定是如何写出长度属性的?

7 年前

knutter539 · WPF DataGrid ComboBoxColumn未更新绑定数据

7 年前

knutter539 · WPF Datagrid将第二个DB表显示为组合框选项

7 年前