Angular2 - 動的な値

Question

を使用するように設定ラジオボタンオプションにどのようにユーザがラジオボタンから値を選択Proposal成分を有する：各場合において

public salutations = [ 
    { value: 0, display: 'Mr & Mrs' }, 
    { value: 1, display: 'Mrs' }, 
    { value: 2, display: 'Ms'}, 
    { value: 3, display: 'Mr'}, 
    { value: 4, display: 'proposal.first_name'} 
    ]; 

を、選択されたオプションをに格納されます。 Proposal.greetingフィールド。私は値を格納していませんが、実際の表示プロパティです。あなたが見ることができるように

<div *ngFor="let salutation of salutations"> 
    <label> 
     <input type="radio" name="salutation" [(ngModel)]="proposal.salutation" 
     [value]="salutation.display"> <!-- we DO NOT want to store the integer value --> 
     {{salutation.display}} 
    </label> 
    </div> 

ユーザがオプション4を選択したときに、その意図は、提案者（proposal.first_name）の実際の名前を格納することです。

後、私はこのようになりますビュー持っているので、これがある：選択したとき、それはfirst_nameのではなく、文字列「proposal.first_nameを格納するように、どのように私は（そのオプション4動的に行うことができます

<p>Dear {{proposal.greeting}} {{proposal.last_name}},</p> 

を'）。

Answer 1

TypeScriptでproposal.firstnameの引用符を取り除く必要があります。 salutationsは、htmlではなく.tsファイルで宣言されているため、Angularは補間を実行しません。また、プレフィックスthis.をタックする必要があります。

public salutations = [ 
    { value: 0, display: 'Mr & Mrs' }, 
    { value: 1, display: 'Mrs' }, 
    { value: 2, display: 'Ms'}, 
    { value: 3, display: 'Mr'}, 
    { value: 4, display: this.proposal.first_name} 
    ]; 

plunkrを参照してください。