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

Question

我有一个表单出现在我的 HTML 文件的模式中，我想将我从表单中获得的值添加到 ag-grid 数组中，但我不知道如何执行此操作。

这是我的文件.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

让我们逐步了解这个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);)
  }
}

注意：MODEL 指的是class App 中的变量，CONTROLLER 指的是class App 中的函数，VIEW 指的是HTML 模板。

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

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

在 Select 中有一个双向绑定，这意味着如果 VIEW 中 name 的值得到更新，Angular 会通知 MODEL name 现在是一个新值;此外，如果 MODEL 中的某些内容要更改 name，那么 VIEW 也会更新。

例如，当您将选择更改为“Ringo”时，模型会更新，然后模型会更新视图，以便标题显示为“Hello Ringo”

现在，如果您取消注释 name: string = "Jane"，那么您基本上是在为 name 设置默认值。您可能还会注意到标题将显示为“Hello Jane”，但选择仍为空白。那是因为“简”不是选择中的选项之一。

---

这对您意味着什么：

在您的 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 文件/模型中添加一些默认值，以便这些变量中的每一个都有一个值：

// somewhere in your TS
materiel: number = 97

Answer 2

我通过在 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;
}