AngularMaterial自动完成值始终为空,而onSelection从未触发
创始人
2024-10-28 11:36:04
0

这个问题通常是由于没有正确使用MatAutocomplete组件的导致的。在MatInput元素上使用MatAutocomplete后,您必须将MatAutocomplete的数据源与MatInput元素绑定,并为选项设置value、displayValue和optionSelected事件处理程序。

以下是一个示例代码片段,说明如何正确使用MatAutocomplete:


  
  
    
      {{ option.name }}
    
  

注意:在上面的示例代码中,过滤选项是从异步源获取的。如果您的选项是静态的,则不需要使用异步框架。

在组件中,需要为MatInput元素创建一个表单控件,并使用MatAutocomplete组件的该控件为DataSoure设置过滤器。然后,定义一个选项选择事件处理程序,以接受已选择的值。

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

@Component({
  selector: "app-my-component",
  templateUrl: "./my-component.component.html",
  styleUrls: ["./my-component.component.css"]
})
export class MyComponentComponent implements OnInit {
  myControl = new FormControl();
  options = [
    { id: 1, name: "Option 1" },
    { id: 2, name: "Option 2" },
    { id: 3, name: "Option 3" }
  ];
  filteredOptions: Observable;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(""),
      map(value => this._filter(value))
    );
  }

  private _filter

相关内容

热门资讯

透视存在!aapoker怎么控... 透视存在!aapoker怎么控制牌(透视)透视脚本(都是有挂)1)aapoker怎么控制牌辅助挂:进...
透视神器!werplan有挂吗... 透视神器!werplan有挂吗(透视)AI教程(2020已更新)(哔哩哔哩)1、下载好werplan...
透视透视!aapoker怎么设... 透视透视!aapoker怎么设置抽水(透视)透视方法(确实有挂)1、aapoker怎么设置抽水系统规...
透视真的!xpoker辅助神器... 透视真的!xpoker辅助神器(透视)AI教程(2025已更新)(哔哩哔哩);1、xpoker辅助神...
透视存在!aapoker辅助怎... 透视存在!aapoker辅助怎么用(透视)透视软件(好像存在有挂)1、起透看视 aapoker辅助怎...
透视代打!werplan有挂吗... 透视代打!werplan有挂吗(透视)软件教程(2023已更新)(哔哩哔哩)1、让任何用户在无需we...
透视安卓版!aapoker透视... 透视安卓版!aapoker透视怎么用(透视)透视脚本入口(果然是有挂);所有人都在同一条线上,像星星...
透视app!sohoo辅助(透... 透视app!sohoo辅助(透视)揭秘教程(2020已更新)(哔哩哔哩);1、下载好sohoo辅助辅...
透视模拟器!aapoker透视... 透视模拟器!aapoker透视脚本(透视)透视脚本下载(切实是有挂)1、首先打开aapoker透视脚...
透视科技!pokemmo辅助器... 透视科技!pokemmo辅助器脚本下载(透视)黑科技教程(2024已更新)(哔哩哔哩);一、poke...