Question

我正在尝试将选定的值从HTML转换为ts文件。以下是使用Angular材质标签的HTML代码

      <mat-form-field [style.visibility]="visibility" >
              <mat-label>Apps</mat-label>
              <mat-select #selectedApp (change)='fetchTableData($event)'>
                    <mat-option *ngFor="let apps of appsList$" [value]="apps.appName">{{apps.appName}}</mat-option>
                    <mat-option [value]="all">All</mat-option>
              </mat-select>
        </mat-form-field>

.ts代码

     @ViewChild('selectedApp') selectedApp;

     ngOnInit() {             
             return this.testcaseService.getAll()
         .subscribe(apps => this.appsList$ = apps);

      }

     fetchTableData(event: any){                  

        console.log("Selected App: "+this.selectedApp.Selected);
      }

我不确定我在这里做错了什么。谁能帮我

Answer 1

将您的(change)事件更改为fetchTableData($event.value)

 <mat-form-field [style.visibility]="visibility" >
              <mat-label>Apps</mat-label>
              <mat-select #selectedApp (change)='fetchTableData($event.value)'>
                    <mat-option *ngFor="let apps of appsList$" [value]="apps.appName">{{apps.appName}}</mat-option>
                    <mat-option [value]="all">All</mat-option>
              </mat-select>
 </mat-form-field>

并将事件用作选定值

fetchTableData(event: any) {

    console.log("Selected App: " + event);
  }

演示https://stackblitz.com/edit/angular-mat-select-data-2

您不应使用this.selectedApp.Selected

Answer 2

我认为您需要使用mat-select中的selectionChange事件绑定。

https://material.angular.io/components/select/api

如何将选定的值<mat-select>从HTML转换为ts文件？

2 个答案: