使用角度编辑和删除按钮单击时的相应值答案

【问题标题】：Edit and Remove the respective values on button click using angular使用角度编辑和删除按钮单击时的相应值
【发布时间】：2017-09-15 23:15:04
【问题描述】：

我正在尝试从数组中删除一个值。我已经编写了删除“删除”链接单击值的逻辑。当我单击与该项目相对的“删除”按钮时，只需删除该项目。但是，无论我是什么项目试图删除，它只删除最后添加的项目。

此外，每当我单击“编辑”时，这些值都需要显示在下拉列表、文本框、复选框或日期选择器中，并且应该能够将值保存在同一项目中，而不是创建新项目。我不明白我怎么能实现这个功能。

有人可以帮我解决这些问题吗？

这是我的 HTML

<div class="col col-12 col-spacing">
  <div>
    <md-select [placeholder]="result" [(ngModel)]="selectedItemType">
      <md-option *ngFor='let attr of result' [value]="attr.fieldType" selected="attr.fieldType"> {{attr.attribute}}
      </md-option>
    </md-select>
  </div>
  <div *ngIf="selectedItemType =='string' || selectedItemType =='decimal'">
    <input placeholder="Enter Text" type="text" class="input" [(ngModel)]="txtEntered">
  </div>
  <div>
    <div *ngIf="selectedItemType == 'date'">
      <md-input-container class="datepicker-align">
        <input mdInput [mdDatepicker]="startDatepicker" placeholder="Select Date" name="StrtDate" id="txtStrtDate" [(ngModel)]="date"
          #startDate>
        <button id="btnOpnStartDate" mdSuffix [mdDatepickerToggle]="startDatepicker"></button>
      </md-input-container>
      <md-datepicker #startDatepicker></md-datepicker>
    </div>
  </div>
  <div *ngIf="selectedItemType == 'boolean'">
    <input type="checkbox" [(ngModel)]="chkBox" />
  </div>
  <button *ngIf="selectedItemType" md-raised-button (click)="Add()" color="accent">Add</button>
  <md-list *ngFor='let selVal of finalValues'>
    <md-list-item> 
      <span> {{ selVal.attributeName }} </span>
      <span *ngIf="txtEntered">{{ selVal.value }} </span>
      <span *ngIf="date">{{selVal.date}} </span>
      <span *ngIf="chkBox"> {{selVal.checked}} </span>
      <a href="#" md-menu-item color="warn" (click)="HandleEdit()" >Edit</a>
      <a href="#" md-menu-item color="warn" (click)="HandleRemove(selVal.attributeName, selVal.value, selVal.date, selVal.checked)">Remove</a>
    </md-list-item>
  </md-list>
</div>

这是我的打字稿课。

export class testing {

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

    HandleEdit() {

      return false;
    }

    HandleRemove(attr, txtValue, dateVal, checkBoxVal) {
      this.finalValues.splice(this.finalValues.indexOf(attr), 1);
      return false;
    }
  }

这是我的模型类

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

【问题讨论】：

标签： angular typescript

【解决方案1】：

您可以使用ngFor 指令传递数组中元素的索引。

例如

模板：

<ul *ngFor="let item of arr; let i = index">
 <li (click)="remove(i)">{{item.prop}}</li>
</ul>

组件：

@Component({ ... })
export class MyComponent {
  private arr: any[];

  removeItem(index: number) {
    this.arr.splice(index, 1);
  }
}

编辑：

Plunkr example

【讨论】：

这是我尝试过的。仍然没有运气。 HandleRemove(index: number) { this.finalValues.splice(index, 1);返回假；在 HTML 中：
删除
您好，请参阅 this plunkr，了解使用 ngFor 指令中的索引按索引删除的示例。