Question

在Angular 4中

我有一个Instrument对象，并请求为彼此添加一个动态比较工具页面，因此我创建了一个2搜索框作为默认值以比较两个乐器，并创建了一个plus，减号按钮以添加搜索框以进行更多比较。

用于创建动态搜索框的代码：

<div id="list" *ngFor="let entry of  SearchList   | keys "> 
        <div class="col-md-3">
              <app-instrument-search (selected)="onInstrumentSelected($event,entry.value)"></app-instrument-search>
              <div class="comparingListItem" *ngIf=' instrumentList.length > 0 && instrumentList[entry.value] != undefined && ( entry.value != null ||  entry.value != undefined)'>
                <span *ngIf="columns[0].checked"> {{instrumentList[entry.value].Name}}</span>
                <span *ngIf="columns[1].checked"> {{instrumentList[entry.value].CompanyName}}</span>
                <span *ngIf="columns[2].checked"> {{instrumentList[entry.value].InstrumentStateName}}</span>
                <span *ngIf="columns[3].checked"> {{instrumentList[entry.value].OrderMinimumQuantity}}</span>
                <span *ngIf="columns[4].checked"> {{instrumentList[entry.value].OrderMaximumQuantity}}</span>
                <span *ngIf="columns[5].checked"> {{instrumentList[entry.value].SellCommissionPercent}}</span>
                <span *ngIf="columns[6].checked"> {{instrumentList[entry.value].BuyCommissionPercent}}</span>
                <span *ngIf="columns[7].checked"> {{instrumentList[entry.value].SectorCode}}</span>
                <span *ngIf="columns[8].checked"> {{instrumentList[entry.value].TsetmcFlow}}</span>
                <span *ngIf="columns[9].checked"> {{instrumentList[entry.value].BoardCode}}</span>
              </div>
        </div>

      </div><div *ngIf="SearchArrayList.length <= 3" class="col-md-3"> <i  (click)="AddSearchList()" class="fa fa-plus add-color"></i> </div>
    <div *ngIf="SearchArrayList.length >2" class="col-md-3"> <i  (click)="RemoveSearchList()" class="fa fa-minus add-color"></i> </div>

和组件

构造函数：

 export class InstrumentComparingComponent implements OnInit, AfterViewInit {

  public SearchList = JSON.parse('{"1": 0 ,"2": 1  }');

添加和删除表单列表：

  AddSearchList() {
    var index = this.SearchArrayList.length
    if (index <= 3) {
      var lastItem = this.SearchArrayList[index - 1] + 1;
      this.SearchArrayList.push(lastItem + 1);
      debugger;

      this.MakingSearchList();
    }
  }


   RemoveSearchList()
  {
    this.SearchArrayList.pop();
    this.MakingSearchList();
  }


MakingSearchList()
{

  var stringObject = "{";

  this.SearchArrayList.forEach(function (i, item, array) {

    if (item === array.length - 1)
      stringObject += '"' + (item + 1) + '"' + ':' + (item) + ' }';
    else
      stringObject += '"' + (item + 1) + '"' + ':' + (item) + ',';

  });

但是，当通过加号按钮添加searchBox时，将不会更新搜索框的列表，因此上一个搜索框的数据将被清除。我该如何解决？

制作搜索框的动态列表以比较角对象

0 个答案: