Question

我正在尝试调用一个使单击的字段为空的函数，

如果我写(focus)="this.element.task=null"可以，但是如果我写(focus)="resetFields(this.element.task)"可以实现吗？

resetFields方法：

resetFields(elm) {
    elm = NULL;
    this.submitted = false;
}

关于Stackblitz的示例：http://stackblitz.com/edit/angular-nvgtec

Answer 1

JavaScript是按值传递的，仅对于对象而言，该值是对该对象的引用。参见this question。

因此，您原始问题的答案为否。您不能在函数内部进行任何修改，也不能在函数外部查看结果，因为所做的更改在当前函数范围内可见。您只能将对象发送到该函数并修改该对象。

resetFields(elm) {
    elm = NULL;  //won't work, will only set reference to elm to null inside resetFields function scope
    elm.someProperty = null; //will work
}

但是您可以这样做：

resetFields(elm, property) {
    elm[property] = null;
}

(focus)="resetFields(this.element, 'task')"

更新了stackblitz demo。

Answer 2

尝试使用(focus)代替onfocus：

<input [(ngModel)]="name" (focus)="resetFields()">

由于您是通过name绑定到[(ngModel)]的，因此在组件中更改name也会更改您的模板。

Answer 3

如果您使用的是反应形式，那么...

...
 4: invokestatic  #3   // Method abc:(Ljava/lang/Object;)Ljava/lang/Object;
 7: checkcast     #4   // class java/lang/Integer
10: invokevirtual #5   // Method java/lang/Integer.toString:()Ljava/lang/String;
...

如果您使用的是 ngModel ，则

this.form.reset(); // it will reset all data to blank

Answer 4

您正在通过ngModel将数据绑定到组件中名为name的变量，然后将相同的变量作为参数resetFields(name: any)的参数从模板/ UI传递回组件。

<input [(ngModel)]="name" (focus)="resetFields(name)">

因为您要从teamplate / UI传递名称的“副本”作为方法resetFields的参数，所以实际上是在修改名称的副本，但不会更改ngModel使用的原始名称...而且因为修改后您永远不会对参数做任何事情……这是行不通的。

 resetFields(name: any) {
    console.log(name);
    name = null;
    console.log(name);
  }

这就是为什么在修改ngModel数据绑定到的原始副本时修改组件变量的原因。

resetFields() {
    this.name = null;
  }

在HTML中将变量作为参数传递

4 个答案: