一旦下拉串列的值更改，我想呼叫一個函式。
我在沒有 Angular Material 的情況下做到了這一點。這是我的 ts 和 html 檔案。
selected="pending";
getRequests(event: any) {
this.selected = event.target.value;
if(this.selected=="pending")
console.log("Inside Pending Requests")
else
console.log("Inside Granted Requests")
}<div style="margin-left: 70%;" appearance="fill">
<select (change)="getRequests($event)">
<option value="pending">Pending</option>
<option value="granted">Granted</option>
</select>
</div>現在，我想在Angular Material Select Component 的幫助下實作這一點。呼叫 getRequests() 函式未按預期作業。有人請幫我解決這個問題。提前致謝。
<mat-form-field style="margin-left: 70%;" appearance="fill">
<mat-label>Status</mat-label>
<mat-select [(value)]="selected" (change)="getRequests($event)" >
<mat-option value="pending">Pending</mat-option>
<mat-option value="granted">Granted</mat-option>
</mat-select>
uj5u.com熱心網友回復：
api 是selectionChangeie (selectionChange)="getRequests($event)"。
請參閱檔案https://material.angular.io/components/select/api
uj5u.com熱心網友回復：
在 Angular Material Design 6 及更高版本中，該(change)方法已被洗掉。而是使用selectionChange
<mat-select (selectionChange)="doSomething($event)">
在此處閱讀更多資訊：Angular 6 Material mat-select 更改方法已洗掉
uj5u.com熱心網友回復：
您的 mat-select 有一個事件，每次更改選擇時都會發出一個事件。根據角度檔案，它被稱為 selectionChange：https : //material.angular.io/components/select/api 所以也許嘗試將您的（更改）更改為（selectionChange），如下所示：
<mat-form-field style="margin-left: 70%;" appearance="fill">
<mat-label>Status</mat-label>
<mat-select [(value)]="selected" (selectionChange)="getRequests($event)" >
<mat-option value="pending">Pending</mat-option>
<mat-option value="granted">Granted</mat-option>
</mat-select>
uj5u.com熱心網友回復：
使用selectionChange而不是改變
<mat-form-field style="margin-left: 70%;" appearance="fill">
<mat-label>Status</mat-label>
<mat-select [(value)]="selected" (selectionChange)="getRequests($event)" >
<mat-option value="pending">Pending</mat-option>
<mat-option value="granted">Granted</mat-option>
</mat-select>
然后您應該能夠從事件物件值屬性中訪問值
getRequests(event: MatSelectChange) {
this.selected = event.value;
if(this.selected=="pending")
console.log("Inside Pending Requests")
else
console.log("Inside Granted Requests")
}
作業示例
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/525413.html