Html 是否可以在下拉列表中显示一定数量的对象？（但保留其余部分以供搜索）

在我的下拉列表中，现在所有的产品都显示出来了，我有大约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>

搜索。。。
258-656-产品1 0,5l
358-656-产品2 0,75l
428-656-产品3 1kg

这是角度修正的：

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

搜索。。。
{{product.title}}

当然，这种角度的方式显示

产品
数组中包含的所有值。。但事实并非如此：）

任何形式的帮助都会很棒

谢谢各位

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

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

现在在您的模板中，继续并调整它以使用可观察控件，并将控件标记为表单控件

<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" />


搜索。。。
{{product.title}}

您需要将被动表单模块导入到您的模块中，以便能够使用
[FormControl]
指令

没有直接关系：作为一个用户，当我只看到五个元素时，我会完全困惑，使用过滤器会得到完全不同的结果。自动完成可能是更好的解决方案。在用户搜索产品之前，不显示任何内容。
在您的组件中，从
@angular/forms
导入
FormControl
，并创建一个可观察的产品[]

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

现在在您的模板中，继续并调整它以使用可观察控件，并将控件标记为表单控件

<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" />


搜索。。。
{{product.title}}

您需要将被动表单模块导入到您的模块中，以便能够使用
[FormControl]
指令

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

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

HTML

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


{{d.name}

示例：
使用管道

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

HTML

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


{{d.name}

示例：
您可以使用索引：

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


搜索。。。
{{product.title}}
您可以使用索引：

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


搜索。。。
{{product.title}}