Question

我是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（）函数。基本上会发生什么，当我在drop-box中选择选项时，我想通过我选择的选项进入功能。有关如何做到这一点的任何想法？谢谢你的建议

Answer 1

您可以使用MatSelect组件提供的 onSelectionChange 并传递 $ event 变量。

取自documentation：selectionChange: 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：您在Angular Material中寻找的简单任务的80％是直接的。请务必查看API +示例，以便了解＆＃34; Angular Way＆＃34;做事。

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

Answer 2

使用 Template reference variables 的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);
}

<强> LIVE DEMO

将变量传递给函数on（valueChange）（TypeScript，Angular）

2 个答案: