Angular 4-데이터 바인딩
데이터 바인딩은 AngularJS, Angular 2에서 바로 사용할 수 있으며 이제 Angular 4에서도 사용할 수 있습니다. 데이터 바인딩에 중괄호를 사용합니다-{{}}; 이 과정을 보간이라고합니다. 이전 예제에서 변수 title에 값을 선언 한 방법과 동일한 값이 브라우저에 인쇄되는 방법을 이미 살펴 보았습니다.
의 변수 app.component.html 파일은 {{title}}이라고하며 제목 값은 app.component.ts 파일 및 app.component.html, 값이 표시됩니다.
이제 브라우저에서 월 드롭 다운을 만들어 보겠습니다. 이를 위해 우리는app.component.ts 다음과 같이-
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 Project!';
// declared array of months.
months = ["January", "Feburary", "March", "April", "May",
"June", "July", "August", "September",
"October", "November", "December"];
}
위에 표시된 달의 배열은 브라우저의 드롭 다운에 표시됩니다. 이를 위해 다음 코드 줄을 사용합니다.
<!--The content below is only a placeholder and can be replaced. -->
<div style="text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>
<div> Months :
<select>
<option *ngFor="let i of months">{{i}}</option>
</select>
</div>
옵션으로 일반 선택 태그를 만들었습니다. 옵션에서 우리는for loop. 그만큼for loop 월 배열을 반복하는 데 사용되며, 이는 차례로 월에있는 값으로 옵션 태그를 생성합니다.
구문 for Angular에서 *ngFor = “let I of months” 개월 값을 얻기 위해 {{i}}에 표시합니다.
두 개의 중괄호는 데이터 바인딩에 도움이됩니다. 변수를 선언합니다.app.component.ts 파일과 같은 파일은 중괄호를 사용하여 대체됩니다.
브라우저에서 위 달의 배열 출력을 보겠습니다.
에 설정된 변수 app.component.ts 바인딩 할 수 있습니다 app.component.html중괄호 사용; 예를 들면{{}}.
이제 조건에 따라 브라우저에 데이터를 표시하겠습니다. 여기에서 변수를 추가하고 값을 true로 할당했습니다. if 문을 사용하여 표시 할 내용을 숨기거나 표시 할 수 있습니다.
예
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 Project!';
//array of months.
months = ["January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December"];
isavailable = true; //variable is set to true
}
<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>
<div> Months :
<select>
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>
<div>
<span *ngIf = "isavailable">Condition is valid.</span>
//over here based on if condition the text condition is valid is displayed.
If the value of isavailable is set to false it will not display the text.
</div>
산출
위의 예를 사용하여 IF THEN ELSE 질환.
예
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 Project!';
//array of months.
months = ["January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December"];
isavailable = false;
}
이 경우, 우리는 isavailablefalse로 변수. 인쇄하려면else 조건, 우리는 만들어야 할 것입니다 ng-template 다음과 같이-
<ng-template #condition1>Condition is invalid</ng-template>
전체 코드는 다음과 같습니다.
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>
<div> Months :
<select>
<option *ngFor="let i of months">{{i}}</option>
</select>
</div>
<br/>
<div>
<span *ngIf="isavailable; else condition1">Condition is valid.</span>
<ng-template #condition1>Condition is invalid</ng-template>
</div>
If else 조건과 함께 사용되며 사용되는 변수는 condition1. 동일하게 할당됩니다id ~로 ng-template, 사용 가능한 변수가 false로 설정되면 텍스트 Condition is invalid 가 표시됩니다.
다음 스크린 샷은 브라우저의 디스플레이를 보여줍니다.
이제 if then else 질환.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 Project!';
//array of months.
months = ["January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December"];
isavailable = true;
}
이제 변수를 isavailable사실로. html에서 조건은 다음과 같이 작성됩니다.
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>
<div> Months :
<select>
<option *ngFor="let i of months">{{i}}</option>
</select>
</div>
<br/>
<div>
<span *ngIf="isavailable; then condition1 else condition2">Condition is valid.</span>
<ng-template #condition1>Condition is valid</ng-template>
<ng-template #condition2>Condition is invalid</ng-template>
</div>
변수가 참이면 condition1, 그 외 condition2. 이제 id로 두 개의 템플릿이 생성됩니다.#condition1 과 #condition2.
브라우저의 표시는 다음과 같습니다.