Angular에서 기본값 설정

1. Angular에서 기본값 설정
2. Angular의 옵션 배열에서 기본값 설정
3. Angular의 동적 값에서 기본값 선택

select 형식으로 기본값을 설정하고, 옵션 배열에서 기본값을 설정하고, Angular에서 옵션이 동적인 경우 기본값을 설정하는 방법을 배웁니다.

Angular에서 기본값 설정

이 자습서에서는 Angular에서 선택 태그의 기본값을 설정하는 방법에 대해 설명합니다. 여러 옵션이 있는 select 양식을 만들 때 기본값이 자동으로 선택되지 않습니다.

따라서 먼저 선택 양식을 만들고 기본값을 설정하고 옵션이 정적이거나 동적이거나 옵션 배열이 있을 때 기본값을 설정하는 가장 좋은 방법에 대해 다양한 시나리오를 논의합니다.

app.component.html에서 select 양식을 만듭니다.

# angular
<select [(ngModel)]='ngSelect' name="selectOption" id="selectOption" class='form-control'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

select 양식을 더 보기 좋게 만들기 위해 app.component.css에 CSS를 추가합니다.

# angular
.form-control{
  padding: 5px 10px;
  background-color: DodgerBlue;
  color: white;
  border-color: black;
  width: 100px;
  height: 30px;
}
option:hover{
  background-color: white;
  color: dodgerblue;
}

출력:

기본값이 선택되지 않은 것을 볼 수 있지만 클릭하면 모든 옵션이 나타납니다.

값을 기본값으로 설정하려면 app.component.ts의 ngSelect 변수에 값을 할당할 수 있습니다. app.component.html의 코드를 보면 이미 [(ngModel)]='ngSelect' 변수를 할당했음을 알 수 있습니다.

이제 1을 기본값으로 설정해 보겠습니다.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ngSelect = 1;
}

기본값을 할당한 후 선택 양식에 1이 현재 기본값으로 표시되는 것을 알 수 있습니다. 그런 식으로 Angular에서 기본값으로 아무 값이나 선택할 수 있습니다.

출력:

Angular의 옵션 배열에서 기본값 설정

옵션 배열에서 기본값을 설정하는 방법에 대해 설명합니다.

우선 두 개의 변수를 생성할 것입니다. ngSelect는 선택 양식의 기본 옵션이고 두 번째는 options로 선택 옵션에 표시하려는 모든 값을 포함합니다.

app.component.ts에 이 코드를 추가해 보겠습니다.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  options = [1,2,3,4,5,6,7,8,9,10]
  ngSelect = 1;
}

options 배열에서 1에서 10까지 값을 설정합니다. ngSelect에서 1을 기본값으로 설정합니다.

app.component.html에 선택 양식을 만듭니다.

# angular
<select class='form-control' id="selectOptions">
<option *ngFor="let opt of options"
[selected]="opt === ngSelect"
[value]="opt">
    {{ opt }}
</option>
</select>

이 코드에서 [selected]를 ngSelect로 설정한 것을 볼 수 있으므로 어떤 옵션이 ngSelect와 같을 때 자동으로 선택됩니다.

출력:

Angular의 동적 값에서 기본값 선택

옵션에 대한 동적 값이 있는 경우 기본값 설정에 대해 논의합니다.

우선 두 개의 변수를 생성할 것입니다. ngSelect는 선택 양식의 기본 옵션이고 두 번째는 options로 선택 옵션에 표시하려는 모든 값을 포함합니다.

동적 값이 있을 것이라는 것을 알고 있으므로 난수 배열을 갖고 해당 배열의 첫 번째 항목에 대한 기본값을 설정하겠습니다.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  options = [3,6,1,4,2,10,7,5,9,8]
  ngSelect = this.options[0];
}

app.component.html에는 다음 코드가 있습니다.

# angular
<select class="form-control" id="selectOptions">
  <option
    *ngFor="let opt of options"
    [selected]="opt === ngSelect"
    [value]="opt"
  >
    {{ opt }}
  </option>
</select>

출력:

해당 배열의 첫 번째 항목이 기본값으로 설정되어 있는 것을 볼 수 있습니다. 배열의 인덱스를 변경하여 이를 변경할 수 있습니다.

이 튜토리얼에서는 Angular에서 select 양식의 기본값을 설정하는 방법을 배웠습니다. 또한 정적, 동적 또는 배열 값이 있는 세 가지 기본값에 대해 논의했습니다.