Angularmat-autocomplete未显示下拉选项
创始人
2024-10-28 06:31:04
0
  1. 确保输入框绑定了matAutocomplete指令,并检查matAutocomplete选项的命名是否正确。

  2. 确保提供了正确的数据源。

  3. 检查mat-form-field是否正确包含了mat-autocomplete。

  4. 确保app.module.ts中包含了MatAutocompleteModule。

  5. 检查提供的数据源是否为空或格式不正确。

以下是一个示例代码:

HTML:


  
  
    
      {{ country }}
    
  

TS:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';

@Component({
  selector: 'autocomplete-example',
  templateUrl: 'autocomplete-example.html',
  styleUrls: ['autocomplete-example.css'],
})
export class AutocompleteExample {
  countryCtrl = new FormControl();
  countries: string[] = ['USA', 'Canada', 'Germany', 'Italy', 'France'];
  filteredCountries: Observable;

  constructor() {
    this.filteredCountries = this.countryCtrl.valueChanges.pipe(
      startWith(''),
      map((value) => this.filter(value))
    );
  }

  filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.countries.filter((country) =>
      country.toLowerCase().includes(filterValue)
    );
  }
}

相关内容

热门资讯

透视美元局!werplan怎么... 透视美元局!werplan怎么作必弊(透视)蜀山四川小程序有挂吗(一贯有辅助平台)-哔哩哔哩运蜀山四...
今日!智星德州插件怎么下载(透... 您好,呱呱丰城双剑辅助这款游戏可以开挂的,确实是有挂的,需要了解加去威信【136704302】很多玩...
值得注意的是!wepoker私... 值得注意的是!wepoker私人局规律(透视)雀友会广东潮汕麻雀(总是有辅助软件)-哔哩哔哩1、不需...
透视黑科技!wepoker私人... 透视黑科技!wepoker私人定制透视(透视)天酷辅助器(本来有辅助工具)-哔哩哔哩该软件可以轻松地...
针对!hh poker透视器下... 针对!hh poker透视器下载(透视)福建789大菠萝脚本(真是真的有辅助平台)-哔哩哔哩1、福建...
透视美元局!agpoker辅助... 透视美元局!agpoker辅助(透视)途游手游辅助(确实真的是有辅助下载)-哔哩哔哩该软件可以轻松地...
今日!hhpoker德州有挂吗... 今日!hhpoker德州有挂吗(透视)潮友会鱼虾蟹有没有挂辅助(好像真的有辅助插件)-哔哩哔哩;暗藏...
不少玩家反映!aapoker万... 不少玩家反映!aapoker万能辅助器(透视)拼十app辅助(果然真的是有辅助辅助器)-哔哩哔哩进入...
近日!wpk透视是真的假的(透... 近日!wpk透视是真的假的(透视)哈糖大菠萝可以开挂吗(确实是有辅助下载)-哔哩哔哩1、用户打开应用...
网友热议!wepokerplu... 网友热议!wepokerplus脚本(透视)方片十三张外卦(本来存在有辅助软件)-哔哩哔哩1、首先打...