이 장에서는 Angular2를 사용하여 데이터를 표시하는 방법과 내장 지침 NgFor 및 NgIf 사용 방법을 배웁니다.
먼저 실행할 수있는 Angular2 샘플 프로그램이 있는지 확인하십시오. 이전 장에서 완료 한 QuickStart Small 프로젝트 또는 공식 웹 사이트 위의 단계에 따라 완료 한 QuickStart Small Project가되는 것이 가장 좋습니다. 그런 다음 다음의 행복한 여행을 시작합시다.
우리의 일련의 기사는 TypeScript 사용하기 때문에 다음 내용을 읽기 전에 TypeScript 유형 또는 ES6을 볼 수도 있습니다. 그들의 URL은 TypeScript 및 ES6입니다. 이전에 Java 또는 C ++와 같은 유사한 객체 지향 언어를 배운 경우 여기에서 수업을 쉽게 배우기가 쉽습니다. 여기의 수업은 기본적으로 해당 언어의 수업과 유사합니다.
이전 섹션에서는 app.component.ts 에서 빈 수업을 내보내 었으므로 가득 차기 위해 채우기 시작해야합니다. 먼저 AppComponent 클래스 (구성 요소), 이름, 연령, 과일에 세 가지 속성을 추가합니다. 다음과 마찬가지로 :
내보내기 클래스 appComponent {username = 'dreamApple'; 나이 = 22; 과일 = '사과'}위의 글쓰기 방법은 실제로 약어의 형태 일 뿐이지 만 완전한 쓰기 방법은 다음과 같습니다.
내보내기 클래스 appComponent {// username = 'dreamApple'; // 나이 = 22; // fruit = 'Apple'사용자 이름 : 문자열; 나이 : 숫자; 과일 : 끈; 생성자 () {this.username = 'DreamApple'; this.age = 22; this.fruit = 'Apple'; }}그런 다음 템플릿에서 더 많은 HTML을 사용해야하므로 템플릿을 수정해야하므로 HTML 조각을 마무리하기 위해 백 틱을 사용해야합니다. 우리의 데코레이터 기능은 다음과 같습니다.
@component ({selector : 'my-app', 템플릿 :`<p> 내 이름은 다음과 같습니다. {{username}} </p> <p> 내 나이는 다음과 같습니다. {{age}} </p> <p> 내가 가장 좋아하는 과일은 다음과 같습니다.물론, 우리는 다음과 같이 데코레이터 함수에서 메타 데이터 객체의 템플릿 구조 구성 옵션을 사용할 수도 있습니다.
@component ({selector : 'my-app', // 템플릿 :`// <p> 내 이름은 다음과 같습니다. {{username}} </p> // <p> 내 나이는 다음과 같습니다. '앱/템플릿/app-template.html'})그 중 app/templates/app-template.html은 프로그램의 루트 디렉토리 (Angular2-Travel 대신)의 템플릿 폴더의 app-template.html 파일을 나타낸 다음 이전에 쓴 HTML 조각을 복사합니다.
위의 과정에서 Angular2는 여전히 Angular1에서 사용하는 이중 버팀대를 사용한다는 것을 알 수 있습니다. 보간 기호로 사용되며 보간 기호가 나타나는 데이터가 표시됩니다. 다음으로, 우리는 내장 명령어 NGFOR를 사용하는 법을 배워야합니다. Angular1에 익숙한 학생들은 NGFOR 및 NG-Repeat가 기본적으로 동일하기 때문에이 지시를 쉽게 시작해야합니다. 일반적으로 배열 인 반복 가능한 물체를 반복하는 데 사용됩니다.
다음으로 아래에 표시된대로 다른 속성 FruitsList를 AppComponent에 추가합니다.
내보내기 클래스 appComponent {username = 'dreamApple'; 나이 = 22; fruitslist = [ 'Apple', 'Orange', 'Pear', 'Banana']; 과일 = this.fruitslist [0]; // this.fruitslist [0]}우리가주의를 기울여야 할 것은 주석은 장소입니다. 위에서 정의한 속성을 참조하려면 this.fruitslist를 사용해야합니다. Fruitslist가 사용되면 Angular는 그것이 무엇을 나타내는 지 알지 못합니다.
다음으로 우리는이 과일 배열을 통해 루프를하고 템플릿에서 그것을 표현하는 방법을 볼 것입니다.
@component ({selector : 'my-app', 템플릿 :`<p> 내 이름은 다음과 같습니다. {{username}} </p> <p> 내 나이는 다음과 같습니다. {{fruit}} </p>`})위의 코드에서주의를 기울여야 할 몇 가지 사항이 있습니다. 먼저, 우리는 ngfor 대신 *ngfor를 사용했습니다. 여기에서는 제거 할 수 없습니다. 제거되면 프로그램은 오류를보고하지 않지만 배열의 첫 번째 항목 만 제거합니다. *추가 해야하는 이유와 관련하여 여기에서 템플릿 구문을 자세히 살펴볼 수 있습니다. 물론, 우리는 각 색인을 보여줄 수있는 *ngfor 표현 뒤에 일부 작업을 작성할 수 있습니다. 이는 다음과 같습니다.
<li *ngfor = "과일 목록의 열매를 보자; i = index;"> {{i}}-{{fruit}} </li>
위의 템플릿 코드에는 몇 가지 사항이 있습니다. 우선, 당신은 *ngfor에 표현이 뒤 따른다는 것을 알아야하므로 우리는 더 나은 루프에 도움이되는 간단한 표현을 작성할 수 있습니다. 또한 LET 키워드를 사용하고 블록 레벨 범위를 추가하며 이러한 변수를 *ngfor 루프 블록으로 제한합니다. 좋아, *ngfor에 대해 더 알고 싶다면 NGFOR에 대한 공식 API를 살펴볼 수 있습니다.
다음으로 소개 될 지시는 NGIF입니다. 물론,이 명령어는 기본적으로 Angular1의 NG-IF 명령어와 유사합니다. 다음 표현식의 값에 따라 DOM의 요소를 추가하거나 제거할지 여부를 결정하십시오.
템플릿 에서이 지침을 어떻게 사용하는지 확인하십시오.
<p *ngif = "fruitslist.length> 3"> FruitsList의 길이는 3 </p>보다 큽니다
<p *ngif = "fruitslist.length.length <= 3"> FruitsList의 길이는 3보다 크지 않습니다.
우선, 우리는 *ngfor를 사용하는 것처럼 *ngif를 사용한다고 지적해야합니다. 그런 다음 *ngif 후에 표현식을 쓸 수 있으며,이 표현의 예상 반환 결과는 부울 값입니다. 그런 다음 *ngif 지시문은이 표현식의 값에 따라 DOM에서 제어하는 요소를 추가할지 제거할지 여부를 결정합니다.
우리는 TypeScript를 사용하기 때문에 클래스를 사용하여 인스턴스를 빌드하는 것과 같은 많은 새로운 기능을 사용할 수 있습니다. 다음으로 과일 클래스를 사용하여 과일 인스턴스를 만들 것입니다. 먼저 앱 폴더 아래에 새 폴더를 만들고 Fruit.ts 파일을 만듭니다. 여기서 Fruit 클래스의 코드를 작성합니다.
수출 클래스 과일 {생성자 (공개 이름 : 문자열, 공공 가격 : 번호) {}}위의 코드를 설명해 봅시다. 우리는 생성자를 사용하고 생성자 에이 객체의 두 가지 특성을 선언합니다. 하나는 이름이고 다른 하나는 가격입니다. 우리는이 객체의 속성을 생성하고 초기화하기 위해 생성자의 이름 : string 및 가격 : 숫자 매개 변수를 사용합니다. 다음으로, 우리는 프로그램 에서이 수업을 사용할 수 있습니다.
먼저,이 수업을 app.component.ts에서 소개하십시오.
'./classes/fruits'에서 {fruit} 가져 오기;
그런 다음 AppComponent의 과일 클래스를 사용하여 과일 목록을 초기화하십시오.
내보내기 클래스 appComponent {username = 'dreamApple'; 나이 = 22; Fruitslist = [새로운 과일 ( 'Apple', 20), 새로운 과일 ( 'Orange', 30), 새로운 과일 ( 'Pear', 40), 새로운 과일 ( 'Banana', 50)]; // noinspection typeScriptUnResolvedVariable fruit = this.fruitslist [0] .name; // this.fruitslist [0]}그런 다음 템플릿을 변경해야합니다.
코드 사본은 다음과 같습니다.
<li *ngfor = "과일 목록의 열매를 보자; i = index;"> {{i}}-{{fruit.name}}-{{fruit.price}} </li>
최종 결과는 다음과 같아야합니다.
마지막으로, 나는 ES6과 TypeScript가 모두 Java를 쓰는 것을 느끼게한다고 말해야합니다. 이것은 또한 프로 및 사기입니다. 장점은 코드의 가독성을 높이고 프로그램을 쉽게 유지 관리 할 수 있으며 대규모 프로젝트를보다 편리하게 작성하여 팀워크를 매우 편리하게 만듭니다. 물론, 몇 가지 단점이 있으며, 이는 주로 모든 사람의 학습 비용을 증가시킵니다. 물론 모든 것이 기대됩니다.