Question

我的下拉框中有一个问题，它显示为空。但是在控制台中它的显示价值。这是我的代码

 <p-autoComplete [(ngModel)]="cdsidvalue" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="name" [size]="16"
                        placeholder="CDSID" [minLength]="1"></p-autoComplete>

filteredCountriesSingle: any[];
  countries: any[];


 this.adminentrylistSearch=[


        {cdsid: '0121', firstname: 'FirstName1', lastname: 'LastName1' ,fullname:"LastName1, FirstName1"},
        {cdsid: '0122', firstname: 'FirstName1', lastname: 'LastName2' ,fullname:"LastName2, FirstName2"},
        {cdsid: '0123', firstname: 'FirstName3', lastname: 'LastName3' ,fullname:"LastName3, FirstName3"},
        {cdsid: '0124', firstname: 'FirstName4', lastname: 'LastName4',fullname:"LastName4, FirstName4"},
        {cdsid: '0125', firstname: 'FirstName5', lastname: 'LastName5',fullname:"LastName5, FirstName5"},
        {cdsid: '0126', firstname: 'FirstName6', lastname: 'LastName6',fullname:"LastName6, FirstName6"},
        {cdsid: '0127', firstname: 'FirstName7', lastname: 'LastName7',fullname:"LastName7, FirstName7"},
       }
filterCountrySingle(event) {
    let query = event.query;

    this.filteredCountriesSingle = this.filterCountry(query, this.adminentrylistSearch);

  ];

  filterCountry(query, adminentrylistSearch: any[]):any[] {
    //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
    let filtered : any[] = [];
    for(let i = 0; i < adminentrylistSearch.length; i++) {
      let country = adminentrylistSearch[i];
      if(country.cdsid.indexOf(query) == 0) {
        console.log("country="+country.cdsid);
        filtered.push(country);
      }
    }
    return filtered;
  }

below image for understanding

Answer 1

问题是您将字段绑定为数组中不存在的名称，您需要提供一个如下所示的字段，

 <p-autoComplete [(ngModel)]="cdsidvalue" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="firstname" [size]="16"
 placeholder="CDSID" [minLength]="1"></p-autoComplete>

STACKBLITZ DEMO

Answer 2

您的html中的配置错误。进行以下更改

 <p-autoComplete [(ngModel)]="cdsidvalue" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="firstname" [size]="16"
                        placeholder="cdsid" [minLength]="1"></p-autoComplete>

如果您想进一步自定义

下面的模板将显示名字和姓氏。

<p-autoComplete [(ngModel)]="cdsidvalue" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="name">
  <ng-template let-item pTemplate="item">
    {{item.firstname}} {{item.lastname}}
  </ng-template>
  <ng-template let-item pTemplate="selectedItem">
    {{item.firstname}} {{item.lastname}}
  </ng-template>
</p-autoComplete>

角度下降问题

2 个答案: