Angular2/4/6将自定义管道筛选列表从HTML传递到组件

我目前正在开发一个搜索栏组件。使用自定义管道，我可以显示项目的下拉列表。我需要将过滤后的项目列表（项目| CustomPipe:search_输入）从searchbar.component.html传递到searchbar.component.ts，但我不确定如何传递

searchbar.component.html

<ul *ngIf="(Items | CustomPipe : search_input).length>0" class="list-group dropdown-container">
    <li *ngFor="let item of Items | CustomPipe : search_input; index as i" [class.active]="i == arrowkeyLocation" (mouseover)=changeStyle($event)
        (mouseleave)=changeStyle($event) (click)="showConfirm(item)" class="list-group-item" [innerHTML]="item.model | highlight : search_input"></li>
</ul>

 <ul *ngIf="filteredContent.length>0" class="lis ...

我目前的做法是：

<input #filterSize type="hidden" value="{{(Items | CustomPipe : search_input).length}}">
<input #filterContent type="hidden" value="{{(Items | CustomPipe : search_input)}}">

searchbar.component.ts

export class SearchbarComponent implements OnInit {
 arrowkeyLocation: number = 0;
@ViewChild('filterSize') filterSize: any;
@ViewChild('filterContent') filterContent: any;
@Output() onSelect: EventEmitter<number> = new EventEmitter<number>();
constructor() {
}
ngOnInit() { }
changeStyle(event) {

    let content = this.filterContent.nativeElement.value;
    let dropdownSize = this.filterSize.nativeElement.value;

    if (event.type == "keydown") {
        switch (event.keyCode) {
            case 38: // this is the ascii of arrow up
                if (this.arrowkeyLocation == -1) {
                    this.arrowkeyLocation = dropdownSize;
                }
                this.arrowkeyLocation--;
                break;
            case 40: // this is the ascii of arrow down
                if (this.arrowkeyLocation == dropdownSize) {
                    this.arrowkeyLocation = -1;
                }
                this.arrowkeyLocation++;
                break;
            case 13:
                this.onSelect.emit(content[this.arrowkeyLocation]);
                break;
        }
    }
}

KeyPressCallback(search_input) {
    this.filteredContent = utilityFunctionToFilter(Items, search_input);
    // Do whatever you like with filteredContent.

}

导出类SearchbarComponent实现OnInit{
arrowkeyLocation:编号=0；
@ViewChild（'filterSize'）filterSize:any；
@ViewChild（'filterContent'）filterContent:任何；
@Output（）onSelect:EventEmitter=neweventemitter（）；
构造函数（）{
}
ngOnInit（）{}
更改样式（事件）{
让内容=this.filterContent.nativeElement.value；
让dropdownSize=this.filterSize.nativeElement.value；
如果（event.type==“keydown”）{
开关（event.keyCode）{
案例38://这是向上箭头的ascii码
如果（this.arrowkeyLocation==-1）{
this.arrowkeyLocation=dropdownSize；
}
此.arrowkeyLocation--；
打破
案例40://这是向下箭头的ascii码
if（this.arrowkeyLocation==dropdownSize）{
this.arrowkeyLocation=-1；
}
这个.arrowkeyLocation++；
打破
案例13：
this.onSelect.emit（内容[this.arrowkeyLocation]）；
打破
}
}
}

---

但是，我无法正确检索对象列表（内容变量）。它作为[object object object]的字符串值从html传递到组件。任何人都可以建议解决方法吗？

我可以提供解决方法

使用普通实用程序函数，并在该函数中实现过滤器逻辑

在按键事件中，从searchbar.component.ts调用该函数并填充 过滤内容

然后根据需要使用搜索栏.component.ts中的过滤内容

在搜索栏.component.html中也使用过滤内容

示例：[这不是真正的代码]

searchbar.component.ts

export class SearchbarComponent implements OnInit {
 arrowkeyLocation: number = 0;
@ViewChild('filterSize') filterSize: any;
@ViewChild('filterContent') filterContent: any;
@Output() onSelect: EventEmitter<number> = new EventEmitter<number>();
constructor() {
}
ngOnInit() { }
changeStyle(event) {

    let content = this.filterContent.nativeElement.value;
    let dropdownSize = this.filterSize.nativeElement.value;

    if (event.type == "keydown") {
        switch (event.keyCode) {
            case 38: // this is the ascii of arrow up
                if (this.arrowkeyLocation == -1) {
                    this.arrowkeyLocation = dropdownSize;
                }
                this.arrowkeyLocation--;
                break;
            case 40: // this is the ascii of arrow down
                if (this.arrowkeyLocation == dropdownSize) {
                    this.arrowkeyLocation = -1;
                }
                this.arrowkeyLocation++;
                break;
            case 13:
                this.onSelect.emit(content[this.arrowkeyLocation]);
                break;
        }
    }
}

KeyPressCallback(search_input) {
    this.filteredContent = utilityFunctionToFilter(Items, search_input);
    // Do whatever you like with filteredContent.

}

searchbar.component.html

<ul *ngIf="(Items | CustomPipe : search_input).length>0" class="list-group dropdown-container">
    <li *ngFor="let item of Items | CustomPipe : search_input; index as i" [class.active]="i == arrowkeyLocation" (mouseover)=changeStyle($event)
        (mouseleave)=changeStyle($event) (click)="showConfirm(item)" class="list-group-item" [innerHTML]="item.model | highlight : search_input"></li>
</ul>

 <ul *ngIf="filteredContent.length>0" class="lis ...

---

hi pixelbits，很抱歉造成混淆，我已经重新表述了我的问题。我的自定义管道没有问题。只是我想为搜索栏实现一个按键事件，这样当用户按下enter键时，它就会转到正确的位置。为此，我需要从html中检索筛选的下拉列表，以便使用它在组件中的changeStyle方法中存在，但我不知道为什么要在列表和输入标记上使用自定义管道？是否有原因？并且您在列表和输入标记上有一些mouseover和mouseleave属性的拼写错误，您缺少“”。请尝试提供一个示例。