Question

我必须使用* 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' ..”，以此类推，直到没有列。.

我试图找到解决方案，但是没有一个帮助我。我怎样才能做到这一点？抱歉，无法最好地解释它。

Answer 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文件传递到打字稿文件的方式，但是在fFilter（）函数中获得了相同的数据，您可以根据需要使用它。

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

我的输出：

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

2 个答案: