（Angular 5）* ng選択/オプションで作業していない

Question

私はnameプロパティを持つモデルQuestionaireを持っています。私が使用してselect要素の異なるオプション値を表示する必要が私のhtmlコード内のクラスアンケートのnameプロパティに基づいて

app.component.ts

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

questionaire : Questionaire; 

* 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>