将变量传递到(valueChange)上的函数(TypeScript,Angular)

qltillow  于 2022-11-18  发布在  TypeScript
关注(0)|答案(2)|浏览(146)

我是Angular和html的新手,所以我在寻求帮助。我有以下代码:

<mat-form-field>
  <mat-select (valueChange)="changeStatus(list.name, card.name)">
    <mat-option *ngFor="let i of lists"> {{i.name}} </mat-option>
  </mat-select>
</mat-form-field>

我需要做的是将{{i.name}}(而不是list.name)传递到changeStatus()函数。基本上,当我在下拉框中选择选项时,我希望将我选择的选项传递到函数中。关于如何做到这一点有什么想法吗?谢谢建议

mzmfm0qo

mzmfm0qo1#

您可以使用MatSelect组件提供的onSelectionChange并传递**$event**变量。
取自documentationselectionChange: EventEmitter<MatSelectChange>
MatSelectChange有两个属性:

source: MatSelect
value: any

您必须更改:
<mat-select (valueChange)="changeStatus(list.name, card.name)">
收件人:

<mat-select (selectionChange)="onSelectionChange($event)">

在您的component.ts上,您可以像这样行程事件:

onSelectionChange($event: MatSelectChange) {
    const list = $event.value; // const or let depending on your handle logic
    // Your logic here
}

**PS:**80%的时候,你在Angular 材料中寻找的简单任务都是直接的。确保你检查了API +示例,这样你就可以学习做事情的“Angular 方式”。

这是Angular Material的实际用途 “我们的目标是按照Material Design规范,使用Angular和TypeScript构建一组高质量的UI组件。这些组件将作为如何按照最佳实践编写Angular代码的示例。"

x8diyxa7

x8diyxa72#

selectionChange事件与模板引用变量一起使用

<mat-form-field>
      <mat-select #ref (selectionChange)="changeStatus(ref.value)">
        <mat-option *ngFor="let i of lists" [value]="i"> {{i.name}} > </mat-option>
      </mat-select>
    </mat-form-field>

组件

changeStatus(value)
{
console.log(value);
}

相关问题