Angular 11 + firebase(firestore) 프로젝트 #08 데이터 바인딩(dashboard)

이제 애기같은 로그인 부분은 고만하고 dashboard해봅시다 

dashboard.component.ts

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

declare type MyType = {
  text : any;
  number : any;
};

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  DataArray : Array<MyType> = [ ];  //데이터를 담는 변수

  constructor() { }

  ngOnInit(): void {
    for(var i = 0;i < 10;i++){
      this.DataArray.push({text:'abcd'+i, number:i+1});
    }
  }

  showData(arg?){  //화면에서 데이터를 볼 함수
    if(arg){
      console.log(arg);
    } else {
      console.log(this.DataArray);
    }
  }
}

우리가 처음 ng g c dashboard 해서 dashboard라는 컴포넌트를 만들면 component.ts에는 자동적으로 OnInit 라는 인터페이스가 생긴다. ngOnInit 함수 이거는 초기화가 진행된 이후에 한번만 호출되는 함수이다.

dashboard.component.html파일에서 한 번 띄워보자 데이터들을

<div *ngFor="let item of DataArray">
    <input type='text'  [value] = 'item.text' />
    <input type='number'  [value] = 'item.number' />
    <input type='button' value='보기' (click)='showData(item)' />
</div>
<input type='button' value='전부 보기' (click)='showData()' />

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

declare type MyType = {
  text : any;
  number : any;
};

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  builder : FormBuilder;
  rows : FormArray;
  formGroup : FormGroup;
  single : FormControl;

  constructor(fb : FormBuilder) {
    this.builder = fb;
    this.rows = this.builder.array([]);
    this.single = new FormControl('Title', Validators.required);
    this.formGroup = this.builder.group({'row_data' : this.rows, 'single_data' : this.single});
   }

  ngOnInit(): void {
    for(var i = 0; i < 10; i++){
      var group = this.builder.group({
        text: this.builder.control('abcd' + i, Validators.minLength(5)),
        number: this.builder.control(i, Validators.required)
      });
      this.rows.push(group);
    }
  }

  showData(arg?){
    if(arg){
      console.log(arg);
    } else{
      console.log(this.formGroup);
    }
  }

}

dashboard.component.html

<form [formGroup] = 'formGroup'>
    <input type='text' [value]='' formControlName='single_data' />
    <div formArrayName="row_data"  *ngFor="let item of rows.controls; let i = index;">
        <div [formGroupName]="i">  <!-- formArray의 그룹 index값을 추가하여 item의 값을 찾을수 있도록 하여 줍니다. -->
            <span>{{i+1}}</span>            
            <input type='text'  formControlName="text"  [value] = 'item.value.text' />
            <input type='number' formControlName="number"    [value] = 'item.value.number'/>
            <input type='button' value='보기' (click)='showData(item)' />
        </div>
    </div>
</form>
<input type='button' value='전부 보기' (click)='showData()' />

 

현타옴 설명은 다음에.

#13