Question

我正在使用Angular Material UI框架中的<mat-selection-list>来添加和删除列表中的选项。我不喜欢在代码中如何实现此功能，而是想问如何在选定的项目和要删除的列表项目之间进行映射。

HTML

    <div id="locationsView">
    <mat-selection-list #locations class="selectionList">
        <mat-list-option *ngFor="let location of locationList">
            {{location}}
        </mat-list-option>
    </mat-selection-list>

    <div class="locationForm" id="addLocationForm" hidden=true>
        <mat-form-field class="inputField">
            <input id="newLocationInput" #newLocation matInput (keyup)="onKeyUp($event, newLocation.value)"
                placeholder="Location">
        </mat-form-field>
        <button mat-icon-button (click)="onClickAddLocation(newLocation.value)" id="addLocation">
            <mat-icon id="add-icon">add_box</mat-icon>
        </button>
    </div>
</div>

<div id="actionFooter">
    <app-actions [locationList]="locationList" [selected]="locations.selectedOptions.selected"></app-actions>
</div>

TS
onClickDelete()方法似乎有效（只要项目的可见文本是唯一的，这对于我的用例就足够了），但是这段代码使我感到难过。必须有一种更精确的方法，可能使用索引/键将所选项目映射到原始列表上。有人可以提供一个不太令人毛骨悚然的解决方案吗？也许我错过了selectedOptions对象上的方法，或者角度框架预见了使用动态列表的另一种方法？

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-actions',
  templateUrl: './actions.component.html',
  styleUrls: ['./actions.component.css']
})
export class ActionsComponent implements OnInit {

  @Input()
  public locationList;

  @Input()
  public selected;

  ngOnInit() {
  }

  onClickDelete() {    
    this.selected.forEach(selectedItem => {

      this.locationList.forEach(listedItem => {

        if (selectedItem._element.nativeElement.children[0].textContent.trim() === listedItem.trim()) {          
          this.locationList.splice(this.locationList.indexOf(listedItem),1);
        }
      });

  });  

  }
}

重构角度垫选择列表项删除

0 个答案: