Angular의 드롭다운 목록에서 값 선택
Angular 2에서 ngOptions 지시문은 드롭다운 목록을 만드는 데 사용되며 ngFor 지시문은 드롭다운 값을 반복하는 데 사용되며 ngif는 값을 선택하는 데 사용됩니다. 이 문서에서는 Angular에서 드롭다운 목록을 선택하는 방법을 보여줍니다.
Angular 2의 드롭다운 목록에서 값을 선택하는 단계
드롭다운 목록에서 값을 선택하는 것은 웹 응용 프로그램에서 가장 일반적인 작업 중 하나입니다.
Angular 2의 드롭다운 목록에서 값을 선택하려면 다음 단계가 필요합니다.
-
코드 편집기를 엽니다.
-
드롭다운 목록을 만듭니다.
-
항목을 추가할 드롭다운 목록을 여는 버튼을 추가합니다.
-
모든 항목을 테이블 형식으로 표시하려면
ng-for지시문과 함께 빈div요소를 추가합니다. -
클릭 시 이 보기에서 변경 사항을 닫고 저장하는 기능을 호출하는 버튼을 추가합니다.
-
ngif지시문을 추가하여 올바른 옵션을 선택합니다.
위에서 언급한 단계를 적용하는 예제를 작성해 보겠습니다.
TypeScript 코드(App.component.ts):
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
selectedOption = 0;
actions = [{ id: 0, name: 'Select Country' },
{ id: 1, name: 'Netherland' },
{ id: 2, name: 'England' },
{ id: 3, name: 'Scotland' },
{ id: 4, name: 'Germany' },
{ id: 5, name: 'Canada' },
{ id: 6, name: 'Mexico' },
{ id: 7, name: 'Spain' }]
}
선택기와 템플릿은 @Component 메타데이터 개체의 두 필드입니다. 선택기 필드는 구성 요소를 나타내는 HTML 요소에 대한 선택기를 지정합니다.
템플릿은 이 구성 요소의 보기를 표시하는 방법에 대해 Angular에 지시합니다. HTML 파일에 URL을 추가하거나 여기에 HTML을 넣을 수 있습니다.
이 예제에서는 URL을 사용하여 HTML 템플릿을 가리켰습니다. 그런 다음 출력 터미널에 표시할 옵션을 작성했습니다.
타입스크립트 코드:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
@NgModule은 모듈의 메타데이터를 정의합니다. BrowserModule은 중요한 앱 서비스 제공업체를 추적합니다.
또한 ngIf 및 ngFor와 같은 표준 지시문도 포함되며, 이는 모든 모듈의 구성 요소 템플릿에서 즉시 나타나고 사용할 수 있습니다. ngModel 지시문에는 FormsModule 모듈이 필요합니다.
선언 목록은 앱 구성 요소 계층 구조의 시작 부분에 있는 앱 요소와 루트 요소를 지정합니다. 선언 배열에는 모듈, 명령 및 파이프 목록이 포함되어 있습니다.
HTML 코드(App.component.html):
<h2>Example of how to select the value in the dropdown list in Angular 2</h2>
<select id="select-menu" [(ngModel)]="selectedOption" class="bx--text-input" required name="actionSelection" >
<option *ngFor="let action of actions" [value]="action.id">{{action.name}}</option>
</select>
<div>
<div *ngIf="selectedOption==1">
<div>Netherland is selected</div>
</div>
<div *ngIf="selectedOption==2">
<div>England is selected</div>
</div>
<div *ngIf="selectedOption==3">
<div>Scotland is selected</div>
</div>
<div *ngIf="selectedOption==4">
<div>Germany is selected</div>
</div>
<div *ngIf="selectedOption==5">
<div>Canada is selected</div>
</div>
<div *ngIf="selectedOption==6">
<div>Mexico is selected</div>
</div>
<div *ngIf="selectedOption==7">
<div>Spain is selected</div>
</div>
</div>
이 코드에서는 ngfor와 ngif라는 두 가지 지시문을 사용했습니다.
ngfor 지시문은 항목 목록을 만드는 데 사용됩니다. 이것은 단순한 배열이거나 일부 속성이 배열로 변환된 객체일 수 있습니다.
ngfor 지시문은 일반적으로 배열을 반복하고 목록의 각 항목에 대해 다른 DOM 요소를 렌더링하는 데 사용됩니다. 여기에서 ngfor의 목적은 국가 목록을 만드는 것입니다.
둘째, if-else 문을 생성하는 Angular의 지시문 ngif를 사용했습니다. ngElse, ngSwitch 및 ngShow/ngHide와 함께 사용할 수도 있습니다.
이 지시문은 표현식이 true로 평가될 때만 HTML 코드를 렌더링합니다. false로 평가되면 아무 것도 렌더링하지 않습니다.
여기에서 ngif는 선택한 국가만 표시합니다.
여기를 클릭 위 코드의 라이브 데모를 확인하십시오.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook