是否可以在下拉列表中显示一定数量的对象？(但要保持休息，以便搜索)

Question

现在，在我的下拉列表中，所有的产品都是显示出来的，我在那里有大约200个产品，而且下拉菜单很大，我只想显示5-10个产品，所以看起来可能是这样的：

​

​

所以基本上所有的产品都可以搜索，但是只有5-10会被显示，这样下拉菜单看起来就更干净了。

这是下拉列表的纯html：

<div class="col-sm-6">
    <select class="form-control dash-form-control select2" style="width: 100%;">
        <option selected disabled>Search...</option>
        <option>258-656 - Product 1 0,5l</option>
        <option>358-656 - Product 2 0,75l</option>
        <option>428-656 - Product 3 1kg</option>
    </select>
</div>

这是角度修正：

<div class="col-sm-6">
    <select class="form-control dash-form-control select2" style="width: 100%;">
        <option selected disabled>Search...</option>
        <option *ngFor="let p of products;" [value]="p.id">{{product.title}}</option>
    </select>
</div>

当然，这种角度方式显示了products数组中包含的所有值。不是这样的：)

任何帮助都是很棒的

谢谢各位

干杯

Answer 1

在您的组件中，从FormControl导入@angular/forms并创建一个可观察的Product[]。

public productCtrl: FormControl = new FormControl();
public products$: Observable<Product[]>;

现在介绍一个冷可观察的方法，它可以监听表单控件上的输入，但在此之前，显示前5项。

this.products$ = this.productCtrl.valueChanges.pipe(
   debounceTime(500),
   startWith(null)
   map(this.filterOrFirstFiveElements) 
   // implement a function
   // that filters and returns your current product array or returns first five elements
   // when a filter is provided and you get more that five elements, you can still only return first five elements of that result
);

现在，在模板中，继续调整它以使用可观察到的控件，并将控件标记为窗体控件。

<div class="col-sm-6">
    <select class="form-control dash-form-control select2" style="width: 100%;">
        <option selected disabled>Search...</option>
        <option *ngFor="let p of products$ | async;" [value]="p.id">{{product.title}}</option>
    </select>
</div>
<input type="text" [formControl]="productsCtrl" />

为了能够使用[FormControl]指令，您需要将reactive模块导入到模块中。

不直接相关：作为一个用户，当我只看到五个元素，使用过滤器，得到一个完全不同的结果时，我会完全迷惑。自动完成也许是一个更好的解决方案。在用户搜索产品之前，不要显示任何内容。

Answer 2

使用管道

filter.pipe.ts

  transform(value: any, args?: any): any {
    console.log(args)
    if(!value){
      return null;
    }
    let arg=args ? args :5;
    let limitTo=value.length >5 ? value.slice(0,arg) : value ;

    return limitTo;
  }

<div *ngFor="let d of data |filterpipe:5">
  {{d.name}}
</div>

示例：https://stackblitz.com/edit/angular-r3kpxc

Answer 3

您可以只使用一个索引：

<div class="col-sm-6">
    <select class="form-control dash-form-control select2" style="width: 100%;">
        <option selected disabled>Search...</option>
        <ng-container *ngFor="let p of products; let i = index;" >
          <option *ngIf="i < 5" [value]="p.id">{{product.title}}</option>
        </ng-container>
    </select>
</div>