angular - 如何限制 Angular2 下拉列表中的重复值

Question

这里我提到了当前的图像形式。

1) 这是一个多选下拉列表。它应该限制重复的税名。例如，在此图像中两次选择 CGST。

选择相同名称时，它应该显示而不显示在此处。所以请帮助我做到这一点。

html

<div class="form-group">
  <label for="tax">Tax Name</label>
  <select class="form-control" id="tax_name" (change)=" dropdown(tax.value)" [(ngModel)]="model.tax" name="tax_name" #tax="ngModel">
    <option value="addNew">
      <i class="fa fa-plus" aria-hidden="true"></i>Add New Tax </option>
    <hr>
    <br/>
    <option *ngFor="let i of taxlist" [value]="i.tax_name">{{i.tax_name}} &nbsp; ( {{i.tax_percentage}}% )</option>
  </select>
</div>
<div>

  <label for="percentage">Tax Percentage</label>
  <input type="text" class="form-control" id="tax_percentage" placeholder="Percentage" pattern="[0-9]+" minlength="0" maxlength="3"
    [(ngModel)]="per" name="tax_percentage" #percentage="ngModel">
</div>
<button (click)="addContact(tax.value,percentage.value);" type="button" class="btn btn-success btn-sm text-right">
  <i class="fa fa-plus fa-lg"></i>
</button>

Answer 1

好的。当您使用 *ngFor 循环值时，您必须删除列表中的所有重复条目。因此，好的方法是在 Angular 2+ 中创建一个过滤器，称为管道。它基本上是一个过滤器，将删除列表中的重复条目，因此用户将无法选择多个相同的值，因为它们已被过滤并且不存在于列表中。

@Pipe(name: 'unique') 
  export class FilterPipe implements PipeTransform
{

  transform(value: any, args?: any): any {

    // Remove the duplicate elements (this will remove duplicates
    let uniqueArray = value.filter(function (el, index, array) { 
      return array.indexOf (el) == index;
    });

  return uniqueArray;   } 

}

您将在 html 中使用此管道:

 <option *ngFor="let i of taxlist | unique" [value]="i.tax_name {{i.tax_name}} &nbsp; ( {{i.tax_percentage}}% )</option>

但是请导入此 Pipe 并将其注册到您正在使用它的模块中。

感谢我之前在评论中提供的链接。