因為listItems是異步拿到的，所以你在綁定dropdown數(shù)據(jù)源的時候，可以有兩種方式：

1. 綁定一個數(shù)組，在template里面可以這樣綁定：

<dropdown [data]="listItems"></dropdown>

listItems: Library[];

getList(urlStr: string) : void {
  this.http
  .get(urlStr)
  .filter((data: Library[]) => data !== null)
  .subscribe((data: Library[]) => {
     this.listItems = data.filter((library) => library.name.toUpperCase().indexOf(pattern.toUpperCase()) !== -1)
  .sort(this.sortFunction))
  });
}

1. 綁定一個Observable， 但在做綁定的時候需要加上async pipe。

<dropdown [data]="listItems | async"></dropdown>

listItems: Observable<Library[]>;

getList(urlStr: string) : Observable<Library[]> {
  this.http
  .get(urlStr)
  .filter((data: Library[]) => data !== null)
  .map((data: Library[]) => {
    return data.filter((library) => library.name.toUpperCase().indexOf(pattern.toUpperCase()) !== -1)
  .sort(this.sortFunction))
  });
}

this.listItems = getList("url");

謝謝@腎導的回答！出差剛回來，抱歉答謝遲了。
兩種方法都試了一下，結(jié)果都不行（主要是本人技術(shù)實在太淺）。在filter處報錯提示：Property 'filter' does not exist on type Observable<Object>. import {filter} from 'rxjs/operator/filter'; 也不行，把filter刪除后雖未報錯，但提取不到數(shù)據(jù)。
用下面兩種方法試了下，顯示listDropdownItems可以得到數(shù)據(jù)，但是卻不能放到Dropdown的下拉列表里。不知道問題出在哪里？

//dropdown.component.ts
...
public getItems: (ids: string[]) => Observable<Library[]>;
public listItems: (item: string) => Observable<Library[]>;
public listItemsMax: (item: string, ids: string[]) => Observable<Library[]>;
public entityToSelectItem: (entity: Library) => SelectItem;
public count: number;

urlStr = 'https://.../api/dict/Library/...';
public listDropdownItems: Library[];
......

ngOnInit() {
this.dropdownService.getMembers(this.urlStr).subscribe((data: Library[]) => {

  if (data !== null) {
    this.listDropdownItems = data;
  } else {
    this.listDropdownItems = null;
  }
});

this.initDropdownItem();

}

private initDropdownItem() {

this.listItems = (term: string) => this.listData(term);
this.listItemsMax = (term: string, ids: string[]) => {
  const selectedCount = ids ? ids.length : 0;
  return this
    .listDataMax(term, 3 + selectedCount)
    .pipe(
      tap(response => this.count = response.count),
      map((response) => response.results)
    );
};
this.getItems = (ids: string[]) => this.getItemData(ids);
this.entityToSelectItem = (entity: any) => {
  return {
    id: entity.id,
    text: entity.libraryDisplay,
    entity: entity
  };
};

}

listData(pattern: string, maxResults?: number): Observable<Library[]> {

return of(this.listDropdownItems
  .filter((library) => library.libraryDisplay.toUpperCase().indexOf(pattern.toUpperCase()) !== -1)
  .sort(this.sortFunction));

}

sortFunction(library1: Library, library2: Library) {

if (library1.libraryDisplay < library2.libraryDisplay) {
  return -1;
}
if (library1.libraryDisplay > library2.libraryDisplay) {
  return 1;
}
return 0;

}

listDataMax(pattern: string, maxResults: number): Observable<{ count: number, results: Library[] }> {

const filteredList = this.listDropdownItems
  .filter((library) => library.libraryDisplay.toUpperCase().indexOf(pattern.toUpperCase()) !== -1)
  .sort(this.sortFunction);

return timer(200)
  .pipe(map((t) => {
    return {
      count: filteredList.length,
      results: maxResults && maxResults < filteredList.length ? filteredList.splice(0, maxResults) : filteredList
    };
  }));

}

getItemData(ids: string[]): Observable<Library[]> {

const selectedItems: Library[] = [];

ids.forEach((id) => {
  this.listDropdownItems
    .filter((item) => item.id === id)
    .map((item) => selectedItems.push(item));
});

return of(selectedItems);

}
.......

//dropdown.service.ts
import {HttpClient, HttpHeaders} from '@angular/common/http';

@Injectable()
export class DropdownService {
private headers: HttpHeaders = new HttpHeaders().set('Content-Type', 'application/json');
private options = {headers: this.headers};

constructor(private http: HttpClient) { }

getMembers(urlStr: string) {

return this.http
  .get(urlStr);

}

}

//dropdown.component.html
//下面數(shù)據(jù)都顯示出來了。
<div>
<ul *ngIf="listDropdownItems">

<li *ngFor="let listDropdownItem of listDropdownItems;">
  <p>
    ID: <span>{{listDropdownItem.id}}</span>
    ModuleName: <span>{{listDropdownItem.modulename}}</span>
    LibraryDisplay: <span>{{listDropdownItem.libraryDisplay}}</span>
   </p>
</li>

</ul>
</div>
//但是下面的Dropdown下拉列表里顯示不出來，是空的，點擊下拉框沒有任何反應(yīng)。
<form [formGroup]="form">
<div class="form-group col-md-6">

    <h2>dropdown-select</h2>
    <app-dropdown cssStyle="form-control input-sm"
                         placeholder="Type to search..."
                         [dataProvider]="listItems"
                         [selectItemAdapter]="entityToSelectItem"
                         [selectedProvider]="getItems"></app-dropdown>
  </div>

</div>
</form>

但如果把listDropdownItems定義成固定的Library[]數(shù)組，而不是從Url取到的，如下，則上面的Dropdown下拉列表是沒有問題的。
listDropdownItems: Library[] = [

{
id: '3',
  modulename: 'libraryApp',
  libraryDisplay: 'libraryApp'
}, {id: '4',
  modulename: 'Test',
  libraryDisplay: 'Test'}

]；

請各位老師們再指教一下吧！