PrimeNG 自动完成下拉设置 Angular

Question

自动完成不工作，第一次加载下拉列表，一旦我尝试输入一些没有过滤的东西，然后 dropwdown 值就消失了 service.ts

 getUserLocations(UserID: string, allList:string  ) {
        return this._http.get(environment.BASE_API_URL + 'xxxxx/' + ID + '/' + allList)
            .map((response: Response) => response.json())
              .do(data => console.log('locations ' + JSON.stringify(data)))
            .catch(this.handleError);
    }

compnent.ts

        brand: any [];
        filteredBrands: any[];
       GetUserLocations(PNSLUID: string, allList: string) {
                   this._searchService.getUserLocations(ID, allList)
                .subscribe(
                data => {
                    this.brand= data.result.name;//not sure how to bind the id
                },
                error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger'));
        }

   filterBrands(event) {
        this.filteredBrands = [];
        for (let i = 0; i < this.brand.length; i++) {
            let brand = this.brand[i];
            if (brand.toLowerCase().indexOf(event.query.toLowerCase()) == 0) {
                this.filteredBrands.push(brand);
            }
        }
    }

html

<p-autoComplete  [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30"
                                                [minLength]="1" placeholder="Office" [dropdown]="true">
                                    <ng-template let-brand pTemplate="item">
                                        <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">

                                            <div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
                                        </div>
                                    </ng-template>
                                </p-autoComplete>

问题是它没有填充自动完成下拉列表..绑定有问题

************************************************ ****更新********************************************* ********* 问题：示例：我的下拉列表具有以下值

区域a
b区
区域c
乙肝办公室
迪办公室

如果我键入区域自动完成不起作用它仍然显示所有值，但是，如果我 select 区域 b 然后开始删除 b 然后自动完成工作..换句话说..它只工作如果我 select 一个值，但如果我从空文本开始并开始输入它不起作用

html

 <p-autoComplete name="OfficeList" [(ngModel)]="val" [suggestions]="results" (completeMethod)="search($event)"  field="name" dataKey="id" [dropdown]="true"></p-autoComplete>

界面

export interface IOffices {
    id: number,
    name:string
}

组件

    val: IOffices;
    results: IOffices[];  
    originalResults: IOffices[];

 GetUserLocations(PNSLUID: string, allList: string) {
              this._searchService.getUserLocations(PNSLUID, allList)
            .subscribe(
              data => {
                  this.results = data.result;
                 this.originalResults = data.result; 
          },
          error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger'));
            })
    }

search(event) {
            console.log("result 2 : " + this.originalResults.length.toString());
    console.log("event : " + event.query.toString());

    this.results = this.originalResults;

    this.results = this.results.filter(data => 
       data.name.indexOf(event.query) !== -1);

    }

Answer 1

似乎您使用的是 primeng 网站上发布的代码。请查看他们的 docs

中的 Objects 部分

这段代码适用于字符串，如果我理解你的代码，你正在尝试绑定一个对象。

所以我的建议是：

如果您要绑定对象，您应该使用 autocomplete 中的属性 field 来设置要向用户显示的对象属性。
您放入 NgModel 的变量（您可以使用整个对象）应该 "the same type" 建议数组中的对象。
对于单击时的下拉功能，使用 onDropdownClick 事件

HTML

<p-autoComplete name="OfficeList" [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" 
                 [size]="30" [minLength]="1" placeholder="Office" [dropdown]="true" (onDropdownClick)="GetUserLocations()">
 </p-autoComplete>

Component.ts

brand: any [];
filteredBrands: any[];

GetUserLocations(PNSLUID: string, allList: string) {
    this._searchService.getUserLocations(ID, allList)
        .subscribe(
            data => {
                this.results = data.result; // You should put the entire array of objects here
            },
            error => console.log('error'));
    }

search(event) {
        this.results = this.results
                           .filter(data => data..toString()
                           .toLowerCase()
                           .indexOf(event.query.toString().toLowerCase()) !== -1);
}

进行此调整应该有效。

一个工作示例： https://primeng-autocomplete-example.stackblitz.io/

希望对您有所帮助。

PrimeNG 自动完成下拉设置 Angular

PrimeNG auto-complete dropdown setup with Angular

angular

primeng

primeng-datatable

primeng-dropdowns