04 리액티브 폼(Reactive Forms) 03

데이터 모델 만들기

이 가이드의 초점은 영웅을 편집하는 리액티브폼 컴포넌트입니다. 영웅 클래스와 영웅 데이터가 필요합니다. app 디렉토리에 새로운 data-model.ts 파일을 만들고 아래 내용을 복사하십시오.

src/app/data-model.ts

export class Hero {     id = 0;     name = '';     addresses: Address[];   }     export class Address {     street = '';     city   = '';     state  = '';     zip    = '';   }     export const heroes: Hero[] = [     {       id: 1,       name: 'Whirlwind',       addresses: [         {street: '123 Main',  city: 'Anywhere', state: 'CA',  zip: '94801'},         {street: '456 Maple', city: 'Somewhere', state: 'VA', zip: '23226'},       ]     },     {       id: 2,       name: 'Bombastic',       addresses: [         {street: '789 Elm',  city: 'Smallville', state: 'OH',  zip: '04501'},       ]     },     {       id: 3,       name: 'Magneta',       addresses: [ ]     },   ];     export const states = ['CA', 'MD', 'OH', 'VA'];

이 파일은 두 클래스와 두 개의 상수를 내 보냅니다. Address 및 Hero 클래스는 응용 프로그램 데이터 모델을 정의합니다. 영웅과 상태 상수가 테스트 데이터를 제공합니다.