Question

我正在开发一个角度为2/4的下拉建议搜索框。

我到目前为止所做的事情：

在文本框中键入内容并按搜索按钮，将显示搜索到的详细信息。

我要实现的目标：

我想显示搜索，想显示‘as-you-type’条建议（如下拉搜索）。

我尝试了其他类似的问题，但答案对我没有用。

我安装了棱角材料，但包装中出现了一些错误。

我想要这样的东西

我尝试过管道，但是没有用。

HTML

<div class="form-group">
    <div class="input-group">
        <div [innerHTML]="highlighted"></div>
        <input name="search" class="form-control" type="text" placeholder="Search" (keyup)="FetchItemDetailsSearch(searchcontent)" [(ngModel)]="searchcontent">                       
        <span class="input-group-btn">
            <button class="btn btn-success ProductSearchBtn" type="button" 
                (click)='FetchItemDetailsSearch(searchcontent)'>
                <i class="glyphicon glyphicon-search" aria-hidden="true"></i>
                <span style="margin-left:10px;">Search</span>
            </button>
        </span>
    </div>                  
</div>

component.ts

FetchItemDetailsSearch(itemcodeordesc: string): void {

    this.pageIndex = 1;
    this.searchflag = 1;

    if (itemcodeordesc.length > 0)
        this.searchcontent = itemcodeordesc;
    else {
        itemcodeordesc = undefined
        this.searchcontent = itemcodeordesc;
    }
    this.prevScrollPosition = 0;

    this._enqService.FetchItemDetailsSearch(this.searchcontent, this.pageIndex).subscribe(itemsData => this.itemdetails = itemsData,
        error => {
            console.error(error);
            this.statusMessage = "Problem with the service.Please try again after sometime";
        });
}

我是这样的（这是问题，没有显示建议）

我尝试了从网络上获取的严格方法，但是没有一个能提供理想的输出。

这是我的包.json

"dependencies": {
    "@angular/common": "~4.3.4",
    "@angular/compiler": "~4.3.4",
    "@angular/core": "~4.3.4",
    "@angular/forms": "~4.3.4",
    "@angular/http": "~4.3.4",
    "@angular/platform-browser": "~4.3.4",
    "@angular/platform-browser-dynamic": "~4.3.4",
    "@angular/router": "~4.3.4",
    "angular-in-memory-web-api": "~0.3.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.8.4"

我也尝试像this一样，但是没有用。

Answer 1

我只是猜测是因为您的数据在可观察范围内返回。
因此，在您的html中应该有一个管道|在某处异步。

如果这不是问题，请向您提供template的渲染位置this.itemdetails。（假设您的服务实际上还返回了值）

文本框中未显示角度2/4搜索建议

1 个答案: