在数组中存储值的问题，而无需清除单击按钮

Question

有人可以研究这个吗？我需要在按钮上单击对象将数据存储在对象中。然后必须在视图上显示。同样，如果用户在下拉列表中选择其他值并在文本框中输入数据，则在按钮单击时，同样，数据需要存储在同一对象中，而无需清除先前存储的值。

现在，我能够将vaue存储在对象中并显示。但是我遇到的问题是，它在单击按钮中将相同的值存储两次。如果我选择另一个值，那么上一个值将被新值覆盖但是阵列的大小正在增加而没有清除。

有人可以告诉我我要在哪里做错了吗？

这是我的HTML文件。

    <md-select [placeholder]="result" [(ngModel)]="selectedItemType">
    <md-option *ngFor='let attr of result' [value]="attr.fieldType" ng-selected="attr.fieldType"> {{attr.attribute}}
    </md-option>
  </md-select>
  </div>
  <div *ngIf="selectedItemType =='string' || selectedItemType =='decimal' || selectedItemType == 'text' || selectedItemType == 'integer'">
    <input placeholder="Enter Text" type="text" class="input" [(ngModel)]="txtEntered">
  </div>
 <button *ngIf="selectedItemType" md-raised-button (click)= "Add()" color="accent" >Add</button>
  <span *ngFor='let selVal of finalValues'> {{selVal.attributeName}} {{selVal.value}}
  </span>

这是我的打字稿类

export class test{
Add() {
  this.addToList();
  }
addToList() {
  this.addValues.push(this.selectedItemType, this.txtEntered);
  this.finalValues = this.addValues.map(({attributeName, value}) =>
  new SelectedList(this.selectedItemType, this.txtEntered));
}
}

这是我的模型类

export class SelectedList {
    constructor(
        public attributeName: any,
        public value: any
    ) {}
}

Answer 1

您的意思是 push而不是在 addToList()中？

this.addValues.push({ attributeName: this.selectedItemType, value: this.txtEntered });
this.finalValues = this.addValues.map((mapElem: {attributeName, value}) =>
 new SelectedList(mapElem['attributeName'], mapElem['value']));

另外，如果您处于Angular 2或更高的领域，那么我认为ng-selected的用法无效。您应该改用selected（如果您动态分配[selected]）。

Answer 2

看起来阿玛尔（Amal）的答案非常出色，因此您绝对可以选择。此外，这是一个工作中的工作，它实际上是他要指出的，尽管您肯定可以完全跳过this.addValues，因为您最终想要的是Array<SelectedList>

plunk的相关代码：

Add() {
     this.addToList();
}
addToList() {
    this.finalValues.push(new SelectedList(this.selectedItemType, this.txtEntered));
}