angular垫选择，将选定的值发送到函数


Angular mat-select, send selected value to a function

我不知道如何将选定的值发送到 mat-select 中的函数。我见过的所有示例都使用 ngModel。

在我的应用程序的 ipad 版本中，我有一个垫子选择，在桌面版本中我有一个列表，每个项目都有一个(单击)。在桌面版本上，如果我单击该项目，我可以获得该项目的 id，因为它在 *ngFor.

内

在 mat-select 上，(valueChange) 位于 *ngFor 的上方和外部。那么如何将所选选项的 id 发送到 valueChange 函数呢？

1
2
3
<mat-select (valueChange)="consolelog(**Need to pass catalog.id here**)">
 <mat-option *ngFor="let catalog of catalogTitles" value="catalog.title">{{catalog.title}}</mat-option>
</mat-select>

将 value 属性更改为 catalog.title 的 catalog 属性，这样您就可以通过更改值事件

在 mat-select 上获取完整的选定对象

示例：

HTML

1
2
3
<mat-select (valueChange)="changeValue($event)">
 <mat-option *ngFor="let catalog of catalogTitles" [value]="catalog">{{catalog.title}}</mat-option>
</mat-select>

TS

1
2
3
4
5
6
7
8
9
10
  catalogTitles = [
    {id:1,title:'aaa'},
    {id:2,title:'bbb'},
    {id:3,title:'ccc'},
    {id:4,title:'ddd'},
  ]

  changeValue(value:any){
    console.log(value.id)
  }

另一种解决方案：
如果您需要使用 catalog.title 或 catalog.id 让 value 属性，您可以获取该值，然后使用这些值过滤主数组以获得正确的对象
例子
HTML

1
2
3
<mat-select (valueChange)="changeValue($event)">
 <mat-option *ngFor="let catalog of catalogTitles" [value]="catalog.title">{{catalog.title}}</mat-option>
</mat-select>

TS

1
2
3
4
5
6
7
8
9
10
11
12
  catalogTitles = [
    {id:1,title:'aaa'},
    {id:2,title:'bbb'},
    {id:3,title:'ccc'},
    {id:4,title:'ddd'},
  ]

  changeValue(value:any){
    let selectedItem:any;
    selectedItem = this.catalogTitles.filter(item => item.title == value)[0]
    console.log(selectedItem.id)
  }

希望这会有所帮助...

app.component.html

1
2
3
4
5
<mat-form-field>
<mat-select [(ngModel)]="selectedCatlog" (valueChange)="onSelection()">
  <mat-option *ngFor="let catlog of catalogTitles" [value]="catlog.title">{{catlog.title}}
  </mat-option>
</mat-select>

app.component.ts

1
2
3
onSelection() {
console.log(this.selectedCatlog);    
}

这会设置两种方式绑定到您的 ts 类中名为 catId 的变量。

然后将选项值设置为 catalog.id 而不是 catalog.title.

html:

1
2
3
4
5
6
7
<mat-select [(value)]="catId">
 <mat-option *ngFor="let catalog of catalogTitles" value="catalog.id">{{catalog.title}}</mat-option>
</mat-select>

<p>
{{catId}}
</p>

ts:

1
2
3
4
export class MyClass {

catId: number;
//etc

您可以简单地将 ngModel 添加到"选择"下拉列表中。

1
<mat-select [(ngModel)]="cat" (valueChange)="print(cat)">

在 TS 中，

1
2
3
print(cat:any){
  console.log(cat.id);
}