Angular Material matAutoComplete問題

General
1

我嘗試了在論壇找之前的文章去參考，但是都不明白，怎樣去解決。
我試試matAutoComplete material，它出現以下ERROR。
ERROR TypeError: countries.filter is not a function
at MapSubscriber.project (app.component.ts:68)
at MapSubscriber._next (map.js:29)
at MapSubscriber.next (Subscriber.js:49)
at MapSubscriber._next (map.js:35)
at MapSubscriber.next (Subscriber.js:49)
at FilterSubscriber._next (filter.js:33)
at FilterSubscriber.next (Subscriber.js:49)
at MergeMapSubscriber.notifyNext (mergeMap.js:72)
at InnerSubscriber._next (InnerSubscriber.js:11)
at InnerSubscriber.next (Subscriber.js:49)

我的app.component.html

<input type="text" name="country" matInput placeholder="國家" formControlName="country" [matAutocomplete]="countries" />

<mat-autocomplete #countries=“matAutocomplete”>

<mat-option *ngFor=“let country of countries$ | async” [value]=“country.name” >

{{ country.name }}

我的app.component.ts
this.surveyForm

  .get('country')

  .valueChanges.pipe(debounceTime(300))

  .subscribe(inputCountry => 

    {

    console.log(inputCountry);

    this.countries$ = this.httpClient.get<any[]>('assets/countries.json', options).pipe(map(countries => {

      console.log('countries:'+countries);

      return countries.filter(country => country.name.indexOf(inputCountry) >= 0);

    }));

  });

console.log都是東西顯示出來。
countries.filter(country => country.name.indexOf(inputCountry) >= 0); 是不是這個有問題。

我是參考以下網頁去做的
https://ithelp.ithome.com.tw/articles/10194495

Thank you very much.

2

countries 出來是陣列嗎?

3

我在.pipe(map(countries => {

  console.log('countries:'+countries);

  return countries.filter(country => country.name.indexOf(inputCountry) >= 0);

加了console.log(‘countries:’+countries); ，它能夠輸出:
[
{name: ‘Afghanistan’, code: ‘AF’},
{name: ‘Åland Islands’, code: ‘AX’},
{name: ‘Albania’, code: ‘AL’},
{name: ‘Algeria’, code: ‘DZ’},
{name: ‘American Samoa’, code: ‘AS’},
{name: ‘AndorrA’, code: ‘AD’},
{name: ‘Angola’, code: ‘AO’},
{name: ‘Anguilla’, code: ‘AI’},
{name: ‘Antarctica’, code: ‘AQ’},
{name: ‘Antigua and Barbuda’, code: ‘AG’},
{name: ‘Argentina’, code: ‘AR’},
{name: ‘Armenia’, code: ‘AM’},
{name: ‘Aruba’, code: ‘AW’},
{name: ‘Australia’, code: ‘AU’},
{name: ‘Austria’, code: ‘AT’},
{name: ‘Azerbaijan’, code: ‘AZ’},
{name: ‘Bahamas’, code: ‘BS’},
{name: ‘Bahrain’, code: ‘BH’},
{name: ‘Bangladesh’, code: ‘BD’},
…

Thank you very much.

4

如果輸出的是陣列，怎麼會出現 countries.filter is not a function 的錯誤訊息呢? 你要不要再檢查一下

有一個種可能性是，你所輸出的是文字而非陣列

5

我在 this.countries$ = this.httpClient.get<string[]>(‘assets/countries.json’, options)，它不是將json檔案輸入為array?

6

我這邊測試起來是沒有問題的，你要不要將你的程式碼整理到 stackblitz 上?
7

應該是我的JSON 檔案問題。THX