从 *ngfor 获取 'keys' 和 'input text' 到 .ts 文件答案

【问题标题】：Get 'keys' and 'input text' from *ngfor to .ts file从 *ngfor 获取 'keys' 和 'input text' 到 .ts 文件
【发布时间】：2018-07-19 16:42:16
【问题描述】：

我必须使用 *ngfor 动态创建的键创建一个字符串，并由用户输入文本。

我觉得很难解释，这里有一些代码和我需要的东西

<th *ngFor="let column of Filter" >
    <tr>{{ column.name }}: <input type="{{column.type}}" id="{{ column.key }}" name="{{ column.key }}" autocomplete="off"  > &nbsp;</tr>
</th>
<button class="btn btn-success" type="submit" (click)="fFilter(string)">Search</button>

我希望字符串是：“ column.key1='input1', column.key2='input2' ..” 依此类推，直到没有列为止..

我试图找到解决方案，但没有人帮助我.. 我怎样才能做到这一点？很抱歉无法以最好的方式解释它。

【问题讨论】：

到目前为止你尝试了什么？

标签： angular typescript data-binding

【解决方案1】：

我已尝试了解您的要求并创建了解决方案。

据我了解，您有使用此处提到的代码生成的用户控件（如下图所示）：

    <th *ngFor="let column of Filter" >
      <tr>{{ column.name }}: 
      <input type="{{column.type}}" id="{{ column.key }}" 
             name="{{ column.key }}" autocomplete="off" 
            [(ngModel)]="column.value" > &nbsp;</tr>
    </th>
    <hr>
    <button class="btn btn-success" type="submit" (click)="fFilter()">Search</button>

在所有文本框中输入数据后，当用户单击要输出的搜索或数据时，如下图所示的函数调用中的警报。

我添加了 [(ngModel)]="column.value" 用于每个文本框数据的两种方式绑定。我们可以在 .ts 文件中获取这些数据。

Column.model.ts：

export class Column{
   public key:string;
   public type:string;
   public name:string;
   public value:string;
    constructor(key:string,type:string,name:string,value:string)
    {
        this.key=key;
        this.type=type;
        this.name=name;
        this.value=value;
    }
}

component.ts 文件：

import { Component, OnInit } from '@angular/core';
import { Column } from './Column';

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit {

  column: Column;
  Filter: Column[]=[new Column("1","ABC","Column1",""),
  new Column("2","ABC","Column2",""),
  new Column("3","ABC","Column3",""),
  new Column("4","ABC","Column4","")];
  constructor() { 
 // this.Filter=new Column(id="",type="",name="")
  }

  ngOnInit() {
  }
  fFilter(){
    var requiredValue="";
    this.Filter.map(
      x=>requiredValue+=(x.key+"="+x.value+",")
    );
    alert(requiredValue);
  }
}

基本上，我改变了将参数从 HTML 文件传递到 typescript 文件的方式，但在 fFilter() 函数中获得了相同的数据，您可以根据需要使用这些数据。

【讨论】：

这正是我所需要的！！但是我没有得到 column.key 和我在输入文本框中输入的内容，比如你的例子（ 1="Apple"2="Banana"... ），我得到了构造函数中的内容..我错过了什么？谢谢你的帮助，它把我带到了我需要的解决方案！
您需要在您的html代码中添加[(ngModel)]="column.value"，查看我上面提到的html代码。
我的代码如下所示：{{ entityName.toLowerCase() + '.' + column.key | translate}}:
您检查过我的 .ts 文件代码吗？如果你像我在“fFilter()”函数中提到的那样使用双向绑定和获取数据，你一定会得到它。再次验证它，如果你无法做到，那么分享你的 HTML 和 ts 文件代码。
如果它是您问题的正确答案，请将其标记为答案。

【解决方案2】：

我的代码看起来像这样，在 html 上调用的函数只是映射在 .ts 端创建的列。我认为我在 html 和 .ts 之间缺少传递我想要的值的东西（column.key - 输入值）

html：

<th *ngFor="let column of entityList.metadata.advancedFilter" >
     <tr>{{ entityName.toLowerCase() + '.' + column.key | translate}}: <input type="{{column.type}}" id="{{ column.key }}" name="{{ column.key }}" autocomplete="off"  [(ngModel)]="column.value" >  </tr>
</th>
<div class="col-sm-9">
     <button class="btn btn-success" type="submit" (click)="advancedFilter()">Search</button>
</div>

.ts

...
import { Column} from '../../models/entity-list.model';
...
export class EntityListComponent implements OnInit {

    column: Column;
    Filter: Column[]=[new Column("code","text","Column1",""),
        new Column("title","text","Column2",""),
        new Column("description","text","Column3",""),
        new Column("entryDate","date","Column4",""),
        new Column("endSubmissionDate","date","Column4","")];

....

    advancedFilter(){
        var requiredValue="where ";
        this.Filter.map(
            x=>requiredValue+=(x.key+"="+"'"+x.value+"'"+" AND ")
        );
        requiredValue = requiredValue.slice(0, -5);
        alert(requiredValue+";");
    }

entity-list.model.ts

...
export class Column{
    public key:string;
    public type:string;
    public name:string;
    public value:string;
    constructor(key:string,type:string,name:string,value:string)
    {
        this.key=key;
        this.type=type;
        this.name=name;
        this.value=value;
    }
}

我的输出：

【讨论】：