![](/img/trans.png)
[英]How to get selected index of selected value in Mat-Select Option in Angular 7+
[英]How to get Id of selected value in Mat-Select Option in Angular 5
如何在 mat-select angular 5 中獲取所選選項值的 id。在 onchangeevent 中僅獲取所選選項的值。 但是如何獲得所選選項值的 id。
client.component.html
<mat-form-field>
<mat-select placeholder="Client*" #clientValue (change)="changeClient($event)">
<mat-option *ngFor="let client of clientDetails" [value]="client.clientName">
{{client.clientName | json}}
</mat-option>
</mat-select>
</mat-form-field>
client.component.ts file
export class Client{
changeClient(event){
console.log(event);
}
}
這個問題是針對 Angular 5 的,但對於其他人使用較新版本的 Angular 來這里, (change)
事件對 mat-select 不起作用。
在Angular 6 中, (change)
事件已更改為(selectionChange)
。
所以它會是:
<mat-form-field>
<mat-select placeholder="Client*" #clientValue (selectionChange)="changeClient($event.value)">
<mat-option *ngFor="let client of clientDetails" [value]="client.id">
{{client.clientName}}
</mat-option>
</mat-select>
</mat-form-field>
在組件中:
changeClient(value) {
console.log(value);
}
為此,您需要:
將(change)="changeClient($event)"
(change)="changeClient($event.value)"
為(change)="changeClient($event.value)"
從[value]="client.clientName"
到[value]="client.id"
<mat-form-field>
<mat-select placeholder="Client*" #clientValue (change)="changeClient($event.value)">
<mat-option *ngFor="let client of clientDetails" [value]="client.id">
{{client.clientName}}
</mat-option>
</mat-select>
</mat-form-field>
您還可以通過使用ViewChild
裝飾器和ngAfterViewInit
來訂閱mat-select
的值更改,這是較少的“html-intrusive”。
這是一個例子:
[HTML]
<mat-form-field [floatLabel]="auto">
<mat-label>Type</mat-label>
<mat-select #matSelect required> //the #matSelect is important here
<mat-option *ngFor="let type of types" [value]="type.value">
{{type.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
[TS]
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatSelect } from '@angular/material';
@Component({
selector: 'app-export-security-pack-material',
templateUrl: './export-security-pack-material.component.html',
styleUrls: ['./export-security-pack-material.component.scss']
})
export class ExportSecurityPackMaterialComponent implements AfterViewInit {
constructor() {}
types: Object[] = [
{ value: 'example-value-0', viewValue: 'ExampleViewValue0'
},
{ value: 'example-value-1', viewValue: 'ExampleViewValue1' }
];
@ViewChild('matSelect') matSelect: MatSelect;
//Reference Variable //variable Name //Type
ngAfterViewInit() {
this.matSelect.valueChange.subscribe(value => {
console.log(value);
});
}
}
有了這個,您的值應該在每次更改選擇器值時記錄在開發控制台Ctrl+Shift+I
或F12
。
或者,如果您不需要 onchange ,您可以直接執行此操作:
[HTML]
<mat-form-field [floatLabel]="auto">
<mat-label>Type</mat-label>
<mat-select [(value)]="matSelectValue" required> <---
<mat-option *ngFor="let type of types" [value]="type.value">
{{type.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
組件 => app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { MaterialDropDown, PAYMENT_MODES } from './order.model';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
name = 'Angular';
sampleForm: FormGroup;
paymentModes: MaterialDropDown[];
constructor() {}
ngOnInit() {
this.paymentModes = PAYMENT_MODES;
this.sampleForm = new FormGroup({
payment_mode: new FormControl(null, Validators.required),
});
}
get f() {
return this.sampleForm.controls;
}
onPaymentSelection() {
console.log(this.sampleForm.value.payment_mode);
}
onSubmit() {
console.log(this.sampleForm.value);
}
}
模塊 => app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
MatFormFieldModule,
MatSelectModule,
MatButtonModule
],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
模型 => order.model.ts
export interface MaterialDropDown {
value: string;
viewValue: string;
}
export const PAYMENT_MODES: MaterialDropDown[] = [
{ value: 'Cash', viewValue: 'Cash' },
{ value: 'cheque', viewValue: 'Cheque' },
{ value: 'dd', viewValue: 'Demand Draft' },
{ value: 'neft', viewValue: 'NEFT' },
{ value: 'rtgs', viewValue: 'RTGS' },
{ value: 'upi', viewValue: 'UPI' }
];
查看 => app.component.html
<form [formGroup]="sampleForm" (ngSubmit)="onSubmit()">
<mat-form-field>
<mat-label>Payment Mode</mat-label>
<mat-select formControlName="payment_mode" (ngModelChange)="onPaymentSelection($event)">
<mat-option *ngFor="let payment_mode of paymentModes" [value]="payment_mode.value">
{{ payment_mode.viewValue }}
</mat-option>
</mat-select>
<mat-hint *ngIf="!f.touched">Please select a valid Payment Mode.</mat-hint>
<div *ngIf="!f.payment_mode.valid && f.payment_mode.touched">
<mat-error *ngIf="f.payment_mode.errors.required">Payment Mode field is required</mat-error>
</div>
</mat-form-field>
<button type="submit" mat-raised-button color="primary" [disabled]="sampleForm.invalid">Save</button>
</form>
<p style="color: #f00">Check Console for outputs</p>
CSS => app.component.css
mat-form-field { width: 280px; margin-right: 35px}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.