以角度将输入绑定到组件答案

【问题标题】：Binding an input to component in angular以角度将输入绑定到组件
【发布时间】：2019-06-26 16:17:21
【问题描述】：

我在理解 Angular 方面运气不佳。我已经设置了这个简单的测试：https://stackblitz.com/edit/stackoverflow-q-54317647-ocxugf?file=app%2Fmy.component.spec.ts。

我在测试中设置了组件值input.value = "aaaa";，它显示在前端。如果我通过键入不同的文本来更改值，则输入组件值中的值似乎不会更新。

【问题讨论】：

您需要先学习角度数据绑定方法，您提到的简单测试表明了这一点。例如，您使用禁用属性（禁用）进行事件绑定，这是错误的，您需要使用属性绑定而不是 [禁用]。
如果你想通过输入使用数据绑定，最简单的方法是双向数据绑定 [(ngModel)] 香蕉在盒子中，将数据从/到两侧绑定

标签： angular input data-binding

【解决方案1】：

您需要使用 [(ngModel)] 进行双向数据绑定。

<input [(ngModel)]="test" name="test" />

现在，如果您在输入中键入任何值，您的值将在测试变量中发生变化。如果你想在输入字段中有一个预定义的值，你可以在你声明变量的地方设置测试变量值，如下所示。

test: string = 'aaa';

这是一个例子

在ts文件中：

import { Component, OnInit, OnChanges, Input } from '@angular/core';


@Component({
  templateUrl: './my.component.html'
})

export class MyComponent implements OnInit {

  test: string;

  constructor() {}
  ngOnInit() {
  }

  printValue() {
    console.log(this.test);
  }
}

在 HTML 中：

<input name="test" [(ngModel)]="test" id="test" />
<br/>
<button (click)="printValue()">Button</button>

【讨论】：

它不起作用，我点击按钮它仍然在控制台中打印undefined。
现在可以使用了：stackblitz.com/edit/…。我不知道为什么前面的例子不起作用。