Angular mat-select，将选定的值发送到函数

Question

我无法弄清楚如何将选定的值发送到垫选择中的函数。我见过的所有例子都使用 ngModel。

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

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

<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>

Answer 1

更改value要catalog插入的属性，以便您可以通过更改值事件catalog.title获取完整选定的对象mat-select

例子：

超文本标记语言

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

TS

  catalogTitles = [
    {id:1,title:'aaa'},
    {id:2,title:'bbb'},
    {id:3,title:'ccc'},
    {id:4,title:'ddd'},
  ]

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

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

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

TS

  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)
  }