从 Angular 2 ag-grid 中的 HTML 表单获取值

Question

我的 HTML 文件中有一个以模态形式出现的表单，我想将从表单中获取的值添加到 ag-grid 数组中，但我不知道该怎么做这个。

这是我的file.html

<template #addTrainContent let-c="close" let-d="dismiss">
    <div class="modal-header">
        <h4 class="modal-title">Ajouter un train</h4>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <input type="radio" name="choiceDirection" /> Gauche
        <input type="radio" name="choiceDirection" /> Droite

        <input type="number" placeholder="Numéro de matériel"   value="nMateriel"/>
        <select>
            <option>1</option>
            <option>52</option>
            <option>38</option>
        </select>

        <input type="checkbox" checked /> Créer dans l'ATS
    </div>

    <div class="modal-footer">
        <button class="btn btn-lg btn-primary" (click)="c(createTrain())">Ajouter le train</button>
        <button type="button" class="btn btn-secondary" (click)="c('Close click')">Annuler</button>
    </div>

</template>

而且我添加了我选择的值而不是表格中的值的火车，就像我的 file.ts

createNewTrain() {
    var newTrain = {
        nMateriel: 97,
        nRame: 42,
        position: 'TB__BLOC_13',
        direction: 'droite',
        etat: 'mouvement',
        vitesse: '24 km/h'
    };

    return newTrain;
}

createTrain() {
    var newItem = this.createNewTrain();
    this.gridOptions.api.addItems( [newItem] );
    this.rowCount++;
}

如何从我的表单中获取值并将其放入我的 ag-grid 数组中？

感谢您的帮助

Answer 1

我在 file.ts 中这样做解决了我的问题：

（我只针对 nMateriel 进行了修改）

createNewTrain() {
var newTrain = {
    nMateriel: (<HTMLInputElement>document.getElementById("nMateriel")).value,
    nRame: 42,
    position: 'TB__BLOC_13',
    direction: 'droite',
    etat: 'mouvement',
    vitesse: '24 km/h'
};

return newTrain;
}

Answer 2

让我们逐步完成这个 example。这是初始设置：

//our root app component
import {Component, Directive, ElementRef} from 'angular2/core'

@Component({
  selector: 'my-app',
  directives: [],
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <label>Name</label>
      <select [(ngModel)]="name" name="Select name" class="ui fluid search selection dropdown"> 
        <option *ngFor="#n of names" [attr.value]="n">{{n}}</option>
      </select>
      <br>
      <button (click)="print()">print</button>
    </div>
  `,
  directives: []
})
export class App {
  // name: string = "Jane";
  names: string[] = ["John", "Paul", "George", "Ringo"]

  print = () => console.log(this.name)

  constructor() {
    setTimeout(() => {
      jQuery('.ui.dropdown').dropdown();
    }, 1000);)
  }
}

NOTE: MODEL refers to variables in the class App, CONTROLLER refers to functions in the class App, and VIEW refers to the HTML template.

我们最感兴趣的变量是name。请注意，它目前在 MODEL 中被注释掉了。但是，我有一个能够打印 this.name 的控制器。发生的事情是 Angular 注意到它绑定在 VIEW 中，因此它决定为我们创建它。

在 <h2> 中它是一个 one-way 绑定 ，这意味着它采用模型中的值。因此，如果要更改 MODEL 中 name 的值，Angular 将使用新值更新 VIEW。

在 Select 中有一个 two-way 绑定 ，这意味着如果 name 在 VIEW 中的值得到更新，Angular 将通知 MODEL name 现在是一个新值；此外，如果 MODEL 中的某些内容发生更改 name，那么 VIEW 也会更新。

例如，当您将 select 更改为 "Ringo" 时，模型会更新，然后模型会更新视图，因此标题显示为 "Hello Ringo"

现在，如果您取消注释 name: string = "Jane"，那么您基本上就是在为 name 设置一个默认值。您可能还会注意到标题将显示为 "Hello Jane"，但 select 仍为空白。那是因为 "Jane" 不是 select.

中的选项之一

这对你意味着什么:

在您的 VIEW 中，使用 [(ngModel)] 将您的每个输入绑定到变量，例如：

<input [(ngModel)]="materiel" type="number" placeholder="Numéro de matériel"   value="nMateriel"/>

然后在您用于创建新火车的 CONTROLLER 中，您将能够使用该变量作为参考：

createNewTrain() {
var newTrain = {
    nMateriel: this.materiel,
    nRame: 42,
    position: 'TB__BLOC_13',
    direction: 'droite',
    etat: 'mouvement',
    vitesse: '24 km/h'
};

return newTrain;
}

确实不需要其他任何东西，但是我强烈建议在您的 TS file/MODEL 中添加一些默认值以提高可读性，这样每个变量都会有一个值：

// somewhere in your TS
materiel: number = 97

从 Angular 2 ag-grid 中的 HTML 表单获取值

Get a value from a HTML form in a Angular 2 ag-grid

html

typescript

ag-grid

angular