Angular 2의 개체에 선택 요소 바인딩

Angular 2는 웹 앱을 만드는 데 사용되는 인기 있는 프레임워크입니다. Angular 2에서 가장 일반적인 작업 중 하나는 선택 요소를 객체에 바인딩하는 것입니다.

이 기사에서는 ng-for 및 ng-value 지시문을 사용하여 Angular 2에서 선택 요소를 개체와 바인딩하는 방법을 배웁니다.

ng-for 및 ng-value를 사용하여 Angular 2의 개체에 선택 요소 바인딩

‘Ng-For’는 배열이나 객체와 같은 항목 컬렉션을 간단하게 반복하고 각 항목에 대한 템플릿을 빌드할 수 있도록 하는 내장 템플릿 지시문입니다.

*ngFor="let <value> of <collection>"

ng-value 지시문은 select 요소를 개체에 바인딩합니다. 선택 요소의 값에 매핑해야 하는 개체의 속성 이름을 지정합니다.

 <input ng-value="expression"></input>

때때로 초보자는 ng-value와 value를 혼동합니다. 따라서 Angular 2에서 선택 요소를 개체와 바인딩하는 경우 ng-value와 value의 차이점을 알아야 합니다.

Angular에서 ng-value와 value의 차이점

차이점은 value는 항상 문자열인 반면 ngValue는 객체를 전달할 수 있다는 것입니다. 예를 들어 드롭다운에 항목 이름을 표시해야 하는 사용 사례가 있습니다.

그리고 메뉴에서 하나의 객체를 고를 때 데이터베이스를 검색할 객체의 id를 선택해야 합니다. 객체가 필요하기 때문에 그러한 시나리오에서 ngValue를 사용하는 것이 도움이 될 것입니다.

또한 채우려는 개체 모델이 개체에 정의되어 있어야 합니다.

ng-value에 대한 자세한 정보를 보려면 여기를 클릭하십시오.

Angular 2의 개체에 선택 요소를 바인딩하는 단계

따라야 할 몇 가지 기본 단계가 아래에 나와 있습니다.

1. ng-model 속성을 select 요소에 추가합니다.
2. 바인딩하려는 개체에 selected 속성을 추가합니다.
3. 중괄호 구문 {{obj.property}}을 사용하여 개체 속성을 select 요소에 바인딩합니다.

모든 단계를 자세히 이해하는 데 도움이 되는 예를 들어 보겠습니다.

먼저 AppComponent라는 구성 요소를 만듭니다. 그런 다음 id와 name을 표시하는 example이라는 이름으로 인터페이스 개체를 만듭니다.

이 경우 id와 name은 모두 문자열을 저장합니다. 위의 두 단계가 끝나면 몇 가지 정보를 추가하여 옵션을 수정할 차례입니다.

완전한 /app.component.ts 코드가 아래에 나와 있습니다.

import { Component } from '@angular/core';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Demo';

  selectedObject : example;
  SimpleExample = [
    {id: 'Welcome to New York City', name: 'New York'},
    {id: 'Welcome to Japan', name: 'Japan'},
    {id: 'Welcome to Singapore', name: 'Singapore'},
    {id: 'Welcome to Delft', name: 'Delft'}
  ]
}

interface example{
  id:string;
  name:string;
}

component.ts 파일에서 example 개체인 selectedObject 변수를 추가했으며 ngModel을 사용하여 select 요소에 바인딩합니다.

또 다른 변수인 SimpleExample에는 ngValue 선택 옵션을 표시하는 데 사용되는 개체 모음이 포함되어 있습니다.

완전한 /app.component.html 코드가 아래에 나와 있습니다.

<h2>Angular 2 Select Example</h2>

<select [(ngModel)]="selectedObject">
<option *ngFor="let show of SimpleExample" [ngValue]="show">
{{show.name}}
</option>
</select>

{{selectedObject | json}}

example 개체가 selectedObject에 추가되었습니다. 그리고 JSON 파이프를 사용하여 표시했습니다.

JSON 파이프는 입력 개체를 원하는 결과로 변환한 다음 변수에 할당하거나 인수로 전달할 수 있습니다. 내장 JavaScript 함수 JSON.stringify()를 사용하여 데이터를 JSON 문자열로 변환합니다.

Angular JSON 파이프에 대해 자세히 알아보려면 여기를 클릭하세요.

위에서 언급한 예제의 다음 출력을 얻습니다.

여기를 클릭 위에서 언급한 전체 작동 코드를 확인하십시오.