Loading...
کنترل Select در انگولار متریال 7
ایجاد برنامه انگولار
در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار ایجاد کرده بودیم را برای استفاده از کنترل
محتوای فایل app.module.ts را مانند نمونه زیر تغییر دهید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {MatSelectModule} from '@angular/material' import {FormsModule, ReactiveFormsModule} from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatSelectModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
محتوای فایل app.component.ts:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | import { Component } from '@angular/core'; import { FormControl } from "@angular/forms"; export interface Food { value: string; display: string; } @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'materialApp'; selectedValue: string; foods: Food[] = [ {value: 'steak', display: 'Steak'}, {value: 'pizza', display: 'Pizza'}, {value: 'tacos', display: 'Tacos'} ]; } |
محتوای فایل app.component.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <form> <h4>mat-select</h4> <mat-form-field> <mat-select placeholder = "Favorite food" [(ngModel)] = "selectedValue" name = "food"> <mat-option *ngFor = "let food of foods" [value] = "food.value"> {{food.display}} </mat-option> </mat-select> </mat-form-field> <p> Selected food: {{selectedValue}} </p> </form> |
نتییجه
بعد از اجرا برنامه خروجی زیر را مشاهده خواهید کرد:
جزئیات
- در ابتدا ما با استفاده از دستورالعمل mat-select یک کنترل select ایجاد کرده ایم.
- سپس با استفاده از دستورالعمل mat-option و *ngFor گزینه های تعریف شده در کلاس کامپوننت را به آن اضافه کرده ایم.
هیچ نظری ثبت نشده است