Question

我不确定这是从Angular 2升级到Angular 4的，但是我没有真正以任何其他方式触及该代码。

  <p-autoComplete placeholder="Search by organization name" size="30" [(ngModel)]="autocompleteValue" (onSelect)="captureEvent($event);gotoLink($event.link)" [field]="title" [suggestions]="foundItems" (completeMethod)="search($event)">
    <ng-template let-item pTemplate="foundItems">
        <div >{{item.title}}</div>
    </ng-template>
  </p-autoComplete>

通过API查找结果的功能“搜索”工作正常。 this 范围中包含这些结果的数组也正常工作，因为我将其记录到控制台。它不会显示为搜索框下方的项目列表，并且没有错误。

可以看到正在运行的应用的示例here。

p-autoComplete标记中显示的搜索方法是这样的（其中this.organizationService.searchNames是api调用。该API调用正确返回正确的数据）：

search(event): void {
this.foundItems = [];
let areasOfLawFilter = this.prepareCategoryFilter( this.getMenuWithCategory("Area of Law"), this.selectedMenuItems );
let workingWithFilter = this.prepareCategoryFilter( this.getMenuWithCategory("Working with"), this.selectedMenuItems );
let opportunitiesForFilter = this.prepareCategoryFilter( this.getMenuWithCategory("Opportunities for"), this.selectedMenuItems );
let countiesFilter = this.prepareCategoryFilter( this.getMenuWithCategory("Counties"), this.selectedMenuItems );
let regionFilter = this.prepareCategoryFilter( this.getMenuWithCategory("Region served"), this.selectedMenuItems );
this.organizationService.searchNames( this.pageId, this.FEEDSERVER, areasOfLawFilter, workingWithFilter, opportunitiesForFilter, countiesFilter, regionFilter, event.query.toLowerCase() )
.then((data) => { this.foundItems = this.getOrganizationsFromPayload(data); console.log(this.foundItems);})
.then(() => this.setLoaded())
.catch( reason => { console.log(reason) } );

}

上面的this.getOrganizationsFromPayload(data)是

private getOrganizationsFromPayload(data: any[]): Organization[] {
let newArray: Organization[] = [];
for (let obj of data) {
  let newObject: Organization = new Organization(
    /*id*/ obj.id,
    /*title*/ obj.name.replace(/&apos;/g,"'"),
    /*contentType*/ 'organization',
    /*description*/ obj.description.replace(/<img[^>]*>/g,""),
    /*descriptionLength*/ obj.descriptionLength || 250,
    /*modifyDate*/ moment(obj.modifyDate).isValid()? moment(obj.modifyDate).toDate(): null,
    /*areaOfLaw*/ this.utilityService.getJSONArray(obj.areaOfLaw),
    /*workingWith*/ this.utilityService.getJSONArray(obj.workingWith),
    /*opportunitiesFor*/ this.utilityService.getJSONArray(obj.opportunitiesFor),
    /*counties*/ this.utilityService.getJSONArray(obj.counties),
    /*numProjects*/ obj.numProjects,
    /*numCases*/ obj.numCases,
    /*isNational*/ obj.isNational === "1"? "National":"Local",
    /*isClicked*/ false,
    /*isCle*/ obj.isCle === "1",
    /*link*/ obj.link,
    /*parentLink*/ obj.link.replace(/\/[^\/]*$/,"")
    );
  newArray.push(newObject);
}
return newArray;

}

我们知道此函数正确创建了foundItems数组，因为控制台显示：

(4) [Organization, Organization, Organization, Organization]
0:Organization {isClicked: false, isCle: false, descriptionLength: 250, id: "375024", title: " ABA Military Pro Bono Project", …}
1:Organization {isClicked: false, isCle: false, descriptionLength: 250, id: "470940", title: " ABA Military Pro Bono Project (Massachusetts)", …}
2:Organization {isClicked: false, isCle: false, descriptionLength: 250, id: "642455", title: " ABA Military Pro Bono Project (New York)", …}
3:Organization {isClicked: false, isCle: false, descriptionLength: 250, id: "466617", title: " ABA/FEMA Disaster Legal Assistance Program - ABA Young Lawyers Division (New York)", …}

每个组织都有title属性，这是我们的ng-template显示的属性。

在角度升级后，primeng自动完成不显示结果

0 个答案: