(Angular 5) * 선택/옵션에서 작동하지 않는 경우

Question

namea 속성을 가진 모델 Questionaire가 있습니다.

내 HTML 코드에서 클래스 Questionaire의 이름 속성을 기반으로이

import {Questionaire} from '../questionaire.model'; 

questionaire : Questionaire; 

내가 사용 select 요소의 다른 옵션 값을 표시해야 app.component.ts * ngIf이 내가 무엇을 입니다 app.component.html

<select 
class="form-control" 
name="proposal" 
required 
ngModel 
> 
    <div *ngIf = "questionaire.name === 'credit'"> 
    <option value="">Select</option> 
    <option value="Proposal">Proposal</option> 
    <option value="ndg">NDG</option> 
    <option value="credit">Credit Line</option> 
    </div> 
    <div *ngIf = "questionaire.name === 'asset'"> 
    <option value="">Select</option> 
    <option value="Proposal">Proposal</option> 
    <option value="asset">Asset</option> 
    </div> 
</select> 

에서 일을하려고 내가 뭘하려고 무엇을 달성 할 수 없습니다입니다.

나는 분명히 희망한다.

Answer 1

실제로 데이터 로직을 구성 요소의 타이프 스크립트 부분으로 이동해야합니다. 템플릿은, 템플릿 내에서, 그리고 프리젠 테이션 로직

public interface Kvp { 
    value: string; 
    label: string; 
} 

export class AppComponent implements OnInit { 

    questionaire : Questionaire; 
    options: Kvp[]; 

    ngOnInit(): void { 
    if (this.questionnaire.name === 'credit') { 
     this.options = [ 
     {value: 'Proposal', label: 'Proposal'}, 
     {value: 'ndg', label: 'NDG'} 
     ]; 
     // You can do the rest ;-) 
    } 
    } 

} 

를 포함 단순히 "옵션"

<select class="form-control" 
    name="proposal" 
    required 
    ngModel> 
    <option value="">Select</option> 
    <option *ngFor="let item from options" value="{{item.label}}">{{item.value}}</option> 
</select> 

노트를 반복해야합니다 당신은 정말 당신의 AppComponent 내부에 비즈니스 로직을 필요는 없습니다. 이 구성 요소에는 하위 구성 요소 만 포함되어야합니다. 대신이 같은 사업부의

Answer 2

사용 NG 템플릿 :

<select class="form-control" name="proposal" required ngModel *ngIf="questionaire.name === 'credit' else asset "> 
    <option value="">Select</option> 
    <option value="Proposal">Proposal</option> 
    <option value="ndg">NDG</option> 
    <option value="credit">Credit Line</option> 
</select> 
<ng-template #asset> 
    <option value="">Select</option> 
    <option value="Proposal">Proposal</option> 
    <option value="asset">Asset</option> 
</ng-template>