Angular2 셋업 라디오 버튼 옵션 방법은 I 사용자가 라디오 버튼의 값을 선택하는 <code>Proposal</code> 성분이

Question

동적 값 사용하는 각각의 경우에

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 필드. 나는 값을 저장하지 않고 실제 표시 속성을 저장합니다. 사용자가 옵션 4를 선택하면

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

당신이 볼 수 있듯이

는 의도는 제안자 (proposal.first_name)의 실제 이름을 저장하는 것입니다.

는 FIRST_NAME 아닌 문자열을 저장을 선택하면 있도록 내가 (그 옵션 4 동적을 만들 수있는 방법 그래서

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

'proposal.first_name : 나중에 나는이 보이는 전망을 가지고 있기 때문에

이

입니다 ').

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을 참조하십시오.