Question

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

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

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

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

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模型，以便如果用户更改输入值，则组件值也会更改。我不必将数据推送到表单中，因为我们的任务是不设置任何后端...

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

感谢您的任何帮助。

Answer 1

我认为您正在寻找的是用于双向数据绑定的CancellationTokenSource。

static

PS：要使用[(ngModel)]，必须导入<input id="customerName" class="form-control" required [(ngModel)]="customer_form.name" name="name">，然后将其添加到[(ngModel)]的{{1}}数组或您要使用的任何模块中在其中使用它。

FormsModule

Answer 2

Use ngModel for two-way data binding
put [(ngModel)] on the input to pass the data from & to your property like this:


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

import { AppComponent }  from './app.component';
import { TablesComponent } from './tables.component';  //<---- IMPORTED

@NgModule({
  imports: [
    BrowserModule,
    FormsModule                 //<---- IMPORTED IN MODULE
  ],
  declarations: [
    AppComponent,
    TablesComponent    //<---- IMPORTED
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
//--------------------------tables.component.html
    <input id="customerName" class="form-control" [(ngModel)]="customer_form.name" required>

Answer 3

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

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

let $as := fn:collection("A")
return fn:collection("B")[not(. is $as)]

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

3 个答案: