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 app示例，他们也访问了DOM元素，但最后一次真正的提交是2个月。

如果您使用数据绑定，您可以使用更清晰的代码，这将导致类似：

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

然后在你的班级中你可以定义成员_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()">。

我知道您的示例代码非常简单，您只是尝试使其工作，但我相信数据绑定方式更多地在框架的逻辑中，而Form API基本上提供了诸如Control，ControlGroup和FormBuilder，帮助您使用Validators等在视图上映射模型。每次需要更改视图时，访问DOM会有些麻烦。最后，您的示例几乎是在Angular2上下文中执行的原始javascript。

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

无论如何，我知道这已经得到了解答，但我认为，鉴于我目前对它的理解以及它如何应用于真实案例，我只会帮助改进解决方案。

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

<强>类别：

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

Answer 5

由于Angular的第2版现在已经很旧，并且我们开发人员需要更多的趋势解决方案，但是为了在此处找到解决方案，我们可能会寻找旧主题，所以我觉得我应该提到另一个与此类似的主题的答案。

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

有两种方法： 1）如果使用 var 或 let 或 const 创建，则不能完全删除。示例：

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

Answer 6

快速做到这一点：

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

更有角度的方法：

HTML：

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

控制器：

intermediateValue: string;

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

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

6 个答案: