Question

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

此外，每当我点击编辑时，这些值都需要显示在下拉列表，文本框，复选框或日期选择器中，并且应该能够将值保存在同一项目中而不是创建新值。我无法理解我的能力实现这一功能。

有人可以帮我这些吗？

这是我的HTML

using (_db)
{
    if (string.IsNullOrEmpty(CompanyID))
    {
        if (string.IsNullOrEmpty(HealthplanCode))
        {
            foreach (string x in _db.BM_OPT_MASTER.Select(y => y.OPT).Distinct())
            {
                currentComboBox.Items.Add(x);
            }
        }
        else
        {
            foreach (string x in _db.BM_OPT_MASTER.Where(y => y.HPCODE == HealthplanCode).Select(y => y.OPT).Distinct())
            {
                currentComboBox.Items.Add(x);
            }

        }
    }
    else
    {
        if (string.IsNullOrEmpty(HealthplanCode))
        {
            foreach (string x in _db.BM_OPT_MASTER.Where(y => y.COMPANY_ID == CompanyID).Select(y => y.OPT).Distinct())
            {
                currentComboBox.Items.Add(x);
            }

        }
        else
        {
            foreach (string x in _db.BM_OPT_MASTER.Where(y => y.COMPANY_ID == CompanyID && y.HPCODE == HealthplanCode).Select(y => y.OPT).Distinct())
            {
                currentComboBox.Items.Add(x);
            }
        }
    }
}

这是我的打字稿类。

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

Answer 1

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

e.g。

模板：

<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

使用angular编辑和删除按钮单击时的相应值

1 个答案: