как ограничить повторяющиеся значения из выпадающего в angular2 - PullRequest
Новая
       41

как ограничить повторяющиеся значения из выпадающего в angular2

0 голосов
/ 13 мая 2018

Здесь я упомянул текущую форму изображения. image

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>

Ответы [ 2 ]

0 голосов
/ 13 мая 2018

Хорошо. Когда вы используете * ngFor для зацикливания значений, вы должны удалить все дублирующиеся записи в списке. Итак, хороший способ - создать фильтр в Angular 2+, который называется Pipe. В основном это фильтр, который удалит ваши дублирующиеся записи в списке, так что пользователь не сможет выбрать несколько одинаковых значений, потому что они отфильтрованы и отсутствуют в списке. 

@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 и зарегистрируйте его в модуле, в котором вы его используете.

Предоставлено ссылкой, которую я ранее предоставил в комментарии.

0 голосов
/ 13 мая 2018

Попробуйте Pipes ИЛИ вы можете использовать недавно введенную функцию ES6 

var items = [1,1,1,1,3,4,5,2,23,1,4,4,4,2,2,2]
var uniqueItems = Array.from(new Set(items))

Она выдаст уникальный результат. 

[1, 3, 4, 5, 2, 23]
...