我想在使用md select Select 值时调用typescript中的函数.material 设计中用于此目的的属性是什么?

   <md-select placeholder="State">
       <md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}
   </md-option>

推荐答案

For Material version >= 6

使用101上的100事件.

<mat-form-field>
    <mat-select placeholder="State" (selectionChange)="someMethod($event.value)">
        <mat-option *ngFor="let state of states" [value]="state.value">
            {{ state.viewValue }}
        </mat-option>
    </mat-select>
</mat-form-field>

在事件方法中,101包含当前 Select 的102.参考official documentation.

@Output() selectionChange: EventEmitter< MatSelectChange >

用户更改选定值时发出的事件.

这里是Stackblitz Demo的链接.


For Material version < 6

使用(change)输出事件.

<md-select placeholder="State" (change)="someMethod()">
  <md-option *ngFor="let state of states" [value]="state.value">
    {{ state.viewValue }}
  </md-option>
</md-select>

另一种方法是在<md-option>上使用(onSelectionChange)事件:

<md-select placeholder="State">
  <md-option *ngFor="let state of states" [value]="state.code" 
             (onSelectionChange)="anotherMethod($event, state)">
    {{ state.name }}
  </md-option>
</md-select>

链接到Stackblitz Demo.

Angular相关问答推荐

Angular :仅当 Select 第一个日期时才显示第二个日期字段

Angular 单元测试组件s @ Input.'变化值检测

我如何更新此Ionic应用程序以解决路由问题?

有Angular react 形式的输入用货币管

HTTP POST响应失败Angular 16

从canActivate创建时,Angular material 对话框不接收MAT_DIALOG_DATA

Angular 16独立依赖注入问题

无法在Mat-SideNav中绑定模式

Ng serve不工作,没有错误或消息来显示问题所在

Angular NG5002错误无效的ICU消息和意外字符EOF

无法在单个元素上多次监听同一个事件

使用 primeng Apollo 主题进行实时部署时多次加载 theme.css 和 preloading.css 文件

URL 更改但组件未在 Angular 导航中呈现

Angular AuthGuard:不推荐使用 CanActivate 和 CanActivateChild.如何更换它们?

在ngOninit方法中直接VS初始化属性

react表单上的自定义验证器用于密码并确认密码匹配将未定义的参数导入 Angular 4

设置 Angular Material Tooltip 的字体大小

请求 http.GET 时发送的 Angular2 OPTIONS 方法

我应该在 Angular 4+ 应用程序中 for each 组件创建一个模块吗?

Angular ngClass 和单击事件以切换类