Angular 2 - 如何用局部变量清除输入？

Question

按照 Angular2 网站的指南，我得到了这个 html:

<input #something (keyup)="doneTyping($event)">
<button (click)="add(something .value)">Add</button>

使用此控制器：

@Component({
  selector: 'my-app',
  appInjector: [SomeService]
})
@View({
  templateUrl: 'index-angular',
  directives:[NgFor]
})
class MyAppComponent {
  name: string;
  stuff: Array<string>;

  constructor(someService: SomeService) {
    this.name = 'Angular2Sample';
    this.stuff= someService.getStuff();
  }
  add(st: string){
    this.stuff.push(st);
  }
  doneTyping($event) {
    if($event.which === 13) {
      this.stuff.push($event.target.value);
      $event.target.value = null;
    }
  }
}

当用户在输入中按下回车键时，doneTyping 方法使用 $event.target.value = null; 清除输入。

但是我无法在按下按钮后进行同样的操作。

Answer 1

您可以在按钮中将输入作为参数传递

<input #something (keyup)="doneTyping($event)">

<!-- Input as paramter -->
<button (click)="add(something)">Add</button>

然后在 add 函数中

add(st: HTMLInputElement){
    this.stuff.push(st.value);
    st.value = null;
  }

Answer 2

此外，您通常希望尽可能避免与 DOM 互动。我刚刚检查了 angular2 github 上的 Todo 应用程序示例，他们也访问了 DOM 元素，但最后一次真正的提交是 2 个月前。

如果您使用数据绑定，您可以获得更简洁的代码，其结果类似于：

<input [value]="_newStuff" (keyup.enter)="addStuff()">
<button (click)="addStuff()">Add</button>

然后在你的 class 中你可以只定义成员 _newStuff : string，你可以按如下方式实现 addStuff :

addStuff() {
    this.stuff.push(_newStuff);
    this._newstuff = '';
}

在大多数情况下，您可能希望 _newStuff 成为一个模型对象，像这样作为接口工作：

class Stuff {
    id : any;
    property : any;
    otherProperty : any;
}

然后你的 _newStuff 将是 _newStuff : Stuff; 你可以这样映射它：<input [value]="_newStuff.property" (keyup.enter)="addStuff()">.

我知道你的示例代码很简单，你只是试着让它工作，但我相信数据绑定的方式更多的是在框架的逻辑中，表单 API 基本上提供了工具例如 Control、ControlGroup 和 FormBuilder，它们可以帮助您使用验证器等将模型映射到视图上。每次您需要更改视图时访问 DOM 会太麻烦。最后，您的示例几乎是原始 javascript 在 Angular2 上下文中执行的。

回到你的例子，现在想象你有另一个事件触发了一个新的东西被添加，比如双击左右，你需要添加另一个处理这个事件的方法，再次将它传递给HTMLInputElement，并做与您在 keyup 事件处理程序上所做的基本相同的事情，从而再次重复代码。通过数据绑定，您的组件拥有视图的状态，因此您可以拥有一种不受触发它的事件类型影响的简单方法。如果模型有效，您可以在那里进行测试（即使为此您将使用表格 API then ）。

无论如何，我知道这个问题已经得到解答，但我想我会根据我目前对它的理解以及如何将其应用于实际案例来帮助改进解决方案。

Answer 3

您可以使用单向绑定来访问输入的值。这是一个非常清晰的架构；您不必将 DOM 元素传递给控制器。

模板：

<!-- controller.value -> input.value binding-->
<input #myinput [value]=myValue>
<button (click)="done(myinput.value)">Add</button>

控制器：

myValue: string; // If you change this then the bound input.value will also change

// be sure to import ngOnInit from @angular/common
ngOnInit() {
    this.myValue = "";
}

done(newValue) {
    // ... processing newValue
    this.myValue = ""; // Clear the input
}

Answer 4

这里有一个实际操作输入对象的好方法

只需要从@angular/core

导入ViewChild

模板：

<input #something (keyup)="doneTyping($event)">

Class:

@ViewChild("something") something : HTMLInputElement;

doneTyping(e : KeyboardEvent) {
    var text = this.something.value;
    if (text != "") {
        //DO SOME STUFF!!!!
    }
}

Answer 5

一个快速的方法：

<input #something (keyup)="doneTyping($event)">
<button (click)="add(something.value);something.value=''">Add</button>

更 Angular 的方法：

HTML:

<input [(ngModel)]="intermediateValue">
<button (click)="add()">Add</button>

控制器：

intermediateValue: string;

add() {
    this.doStuff(this.intermediateValue);
    this.intermediateValue= "";
}

Answer 6

由于 Angular 的第 2 版现在已经很旧了，我们开发人员需要更多趋势解决方案，但我们可能会查看旧主题以在这里找到解决方案，我觉得我应该提一下来自另一个与此类似的主题。

这个答案有效并用 Type Script 解决了我在 Angular 7 中的问题。 Here its link

有两种方式： 1) 我是用 var 或 let 或 const[ 创建的=34=]，那就根本删不掉了。示例：

var g_a = 1; //create with var, g_a is a variable delete g_a; //return false console.log(g_a); //g_a is still 1

2) 如果创建时没有var,那么可以删除..如下:

声明：

selectedRow: any; selectRowOfBankForCurrentCustomer(row: any) { this.selectedRow = row; // 'row' object is assigned. }

正在删除：

resetData(){ delete this.selectedRow; // true console.log(this.selectedRow) // this is error because the variable deleted, not its content!! }

Angular 2 - 如何用局部变量清除输入？

Angular 2 - How to clear an input with a local variable?

javascript

angular