从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++; 
} 

如何我可以从我的表单中获取值并将其放入我的网格数组中吗？

谢谢您的帮助

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变量，控制器是指功能在class App和VIEW指HTML模板。

我们最感兴趣的变量是name。注意它现在在MODEL中被注​​释掉了。但是，我有一台能够打印this.name的控制器。发生的是Angular注意到它被绑定在VIEW中，所以它决定为我们创建它。

在<h2>这是一个单向绑定，这意味着它采取什么是模型中的值。所以如果有什么东西要改变MODEL中的name的值，Angular会用新值更新VIEW。

在选择有一个双向绑定，这意味着如果name在视图中值被更新，角将通知模型name现在是一个新的价值;另外，如果MODEL中的某些内容改变了name，那么VIEW将被更新。

例如，当你改变选择，以“环”，该模型被更新，那么模型更新视图，因此如果您取消注释name: string = "Jane"，那么你基本上标题写着“你好环”

现在为name设置默认值。您可能还会注意到，标题将显示为“Hello Jane”，但该选择保持空白。这是因为“简”不是选择中的选项之一。

---

这意味着什么，你：

在你看来绑定您的每一个输入变量与[(ngModel)]例如：用于创建一个新的列车

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

然后在你的控制器您将能够使用该变量作为参考：

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; 
}