将值存储在数组中而不在按钮单击时清除前一个值的问题

时间:2017-09-15 19:24:22

标签: angular

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

现在我可以将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
    ) {}
}

2 个答案:

答案 0 :(得分:1)

你想pushaddToList()代替this.addValues.push({ attributeName: this.selectedItemType, value: this.txtEntered }); this.finalValues = this.addValues.map((mapElem: {attributeName, value}) => new SelectedList(mapElem['attributeName'], mapElem['value'])); 吗?

ng-selected

此外,如果您处于角度2或更高的范围内,那么我认为selected的用法无效。如果要动态分配,则应使用[selected]代替 INNER JOIN "apple_trees" AS ["apple_trees_trees"] --Using the alias name here. ON "apple_trees_trees"."apple_id" = "apple"."id"

答案 1 :(得分:0)

看起来amal有一个功能完善的答案,所以你绝对可以选择。另外,here's a working plunk基本上完成了他所指出的内容,虽然感觉你绝对可以完全跳过this.addValues,因为你最终想要的是Array<SelectedList>

来自plunk的相关代码:

Add() {
     this.addToList();
}

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