Angular 2将HTML输入绑定到组件变量，例如在Vue中?

问题描述

所以我一直在为此苦苦挣扎...我一直在研究文档，但是在组件和DOM之间进行通信的指令和方式有很多，但是只有几个很好的例子...

So I've been struggling with this for a long time...I've been looking into the docs, but there are so many different directives and ways to communicate between components and the DOM, but only a few good examples...

所以我实际上甚至不确定我需要什么.假设我在 tables.component.html 文件中有一个用户输入，如下所示:

So I'm actually not even sure what I need. Let's say I have a user input in my tables.component.html file like this:

<label>Name</label>
<input id="customerName" class="form-control" required>

然后是我的 tables.component.ts 文件，如下所示:

Then there is my tables.component.ts file which looks like this:

import { Component, OnInit } from '@angular/core';
import { isLoggedIn } from '../../assets/js/auth.js';
import { Router } from '@angular/router';


@Component({
  selector: 'app-tables',
  templateUrl: './tables.component.html',
  styleUrls: ['./tables.component.css']
})

export class TablesComponent implements OnInit {

  customers = [];

  id = ""; // keep outside of object to prevent user changes
  customer_form = {
    name: "",
    job: "",
    address: "",
    birthdate: "",
    email: "",
  }

  constructor(private router: Router) { }

    ...
}

为简单起见:我想将上面的用户输入绑定到组件中的customer_form.name变量.我正在寻找等效的Vue 2.0模型，以便如果用户更改输入值，则组件值也会更改.我不必在表单中推送数据，因为我们的任务是不设置任何后端...

To make it simple: I want to bind the user input above to the customer_form.name variable in my component. I'm looking for the equivalent of Vue 2.0 models, so that if the user changes the input value, the component value changes aswell. I don't neccessarily have to push the data within a form since we've got the task not to set up any backend...

无论如何，我有点困惑.我阅读了文档，但情况变得更糟了.一页说我应该在表单中添加一个控制器，并在HTML的底部添加一个脚本，另一页说我必须为表单创建一个模板，该模板应存储在组件中...然后有很多不同的指令来绑定事物.我以为您要使用ngModel，但似乎无法像在我发现的示例中那样使用它.

Anyway, I'm kinda confused. I read the docs, but that made it just worse. One page says I'm supposed to add a controller to the form and add a script to the bottom of the HTML, another one said I have to make a template of the form that should be stored in the component...And then there are so many different directives to bind things. I was assuming you'd want to use ngModel for that, but I couldn't seem to get that working like in the examples I found.

感谢您的任何帮助.

推荐答案

我创建了一个以模板驱动形式进行绑定的简单示例: https://stackblitz.com/edit/angular-m2tkrf

I have created a simple example of binding in a template-driven form: https://stackblitz.com/edit/angular-m2tkrf

请注意， FormsModule 已导入 app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';         //<---- IMPORTED

import { AppComponent }  from './app.component';
import { HeroFormComponent } from './hero-form/hero-form.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule                 //<---- IMPORTED IN MODULE
  ],
  declarations: [
    AppComponent,
    HeroFormComponent
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

这篇关于Angular 2将HTML输入绑定到组件变量，例如在Vue中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！