-
01 데이터의 표현앵귤러/03 템플릿&데이터 바인딩 2017. 8. 18. 22:30
데이터의 표현
HTML 템플릿의 컨트롤을 앵귤러 엘리먼트의 속성에 바인딩하여 데이터를 표시할 수 있습니다.
이 페이지에서는 영웅의 목록이 있는 컴포넌트를 만듭니다. 영웅 이름 목록을 표시하고 목록 아래에 조건부로 메시지를 표시합니다.
최종 UI는 다음과 같습니다..
보간으로 컴포넌트 속성 표시
컴포넌트 등록정보를 표시하는 가장 쉬운 방법은 보간을 통해 속성 이름을 바인딩하는 것입니다. 보간법을 사용하면 두 개의 중괄호로 묶인 뷰 템플릿에 속성 이름을 넣을 수 있습니다. {{myHero}}.
display-data라는 새 프로젝트를 작성하십시오.
그런 다음 템플릿과 컴포넌트의 본문을 변경하여 app.component.ts 파일을 수정합니다.
완료되면 다음과 같이 보입니다.
ng new my-app
src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
`
})
export class AppComponent {
title = 'Tour of Heroes';
myHero = 'Windstorm';
}
이전에 비어있는 컴포넌트에 title 및 myHero라는 두 가지 속성을 추가했습니다.
수정 된 템플릿은 이중 중괄호 보간법을 사용하여 두 가지 컴포넌트 속성을 표시합니다.
Angular는 컴포넌트에서 title 및 myHero 속성 값을 자동으로 가져 와서 해당 값을 브라우저에 삽입합니다. Angular는 이러한 속성이 변경 될 때 디스플레이를 업데이트합니다.
appComponent 클래스의 인스턴스를 만들기 위해 new를 호출하지 않습니다. Angular가 인스턴스를 만듭니다.
@Component 데코레이터의 CSS selector는 <my-app>라는 엘리먼트를 지정합니다. 이 엘리먼트는 index.html 파일 본문의 표시위치입니다.
src/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<my-app>로딩중...</my-app>
</body>
</html>
AppComponent 클래스(main.ts)로 부트 스트랩 할 때 Angular는 index.html에서 <my-app>를 찾은 다음 AppComponent 를 인스턴스화하고 <my-app> 태그 내에서 표현합니다.
이제 앱을 실행하십시오. 제목과 영웅 이름이 표시됩니다
다음 섹션에서는 앱의 코딩 선택 사항 중 일부를 검토합니다.
템플릿 인라인 또는 템플릿 파일?
컴포넌트의 템플리트를 두 위치 중 하나에 저장할 수 있습니다. 템플릿 속성을 사용하여 인라인으로 정의하거나 별도의 HTML 파일로 템플릿을 정의하고 @Component 데코레이터의 templateUrl 속성을 사용하여 컴포넌트 메타 데이터에 링크 할 수 있습니다.
인라인과 분리 된 HTML 간의 선택은 정책의 문제입니다. 여기에서는 템플리트가 작고 추가 HTML 파일이 없으면 데모가 더 간단하기 때문에 응용프로그램은 인라인 HTML을 사용합니다.
두 가지 스타일 모두에서 템플릿 데이터 바인딩은 컴포넌트의 속성에 동일한 액세스 권한을가집니다.
생성자 또는 변수 초기화?
이 예제에서는 변수 할당을 사용하여 컴포넌트를 초기화하지만 생성자를 사용하여 속성을 선언하고 초기화 할 수도 있습니다.
ng g class app-ctor.component
src/app/app-ctor.component.ts
export class AppCtorComponent {
title: string;
myHero: string;
constructor(){
this.title = 'Tour of Heroes';
this.myHero = 'Windstorm';
}
}
*ngFor를 사용하여 배열 속성 표시
영웅 목록을 표시하려면 컴포넌트에 영웅 이름 배열을 추가하고 myHero를 배열의 첫 번째 이름으로 다시 정의합니다.
src/app/app.component.ts
export class AppCtorComponent {
title: string;
heroes = ['Windstorm','Bombasto','Magneta','Tornado'];
myHero = this.heroes[0];
}
템플릿 안의 Angular ngFor 지시어를 사용하여 영웅 목록에 각 아이템을 표시합니다.
src/app/app.component.ts (template)
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
<p>Heroes:</p>
<ul>
<li *ngFor="let hero of heroes">
{{ hero }}
</li>
</ul>
`
이 UI는 <ul> 및 <li> 태그와 함께 HTML 순서없는 목록을 사용합니다. <li> 엘리먼트의 * ngFor는 Angular "repeater"지시어입니다. <li> 엘리먼트 (및 그 하위 엘리먼트)를 "repeater template"으로 표시합니다.
src/app/app.component.ts (li)
<li *ngFor="let hero of heroes">
{{ hero }}
</li>
ngFor 큰 따옴표로 묶인 명령에서 hero는 템플릿 입력 변수의 예입니다
Angular는 목록의 각 항목에 대해 <li>를 복제하여 현재 반복에서 hero 변수를 영웅으로 설정합니다. Angular는 변수를 이중 중괄호의 보간 문맥으로 사용합니다.
'앵귤러 > 03 템플릿&데이터 바인딩' 카테고리의 다른 글
02 템플릿 구문 05 (0) 2017.08.19 02 템플릿 구문 04 (0) 2017.08.19 02 템플릿 구문 03 (0) 2017.08.19 02 템플릿 구분 02 (0) 2017.08.19 02 템플릿 구문 01 (0) 2017.08.19
