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

这是因为后来我的视图看起来像这样：

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

那么我怎样才能使该选项4动态化（这样当选择时它会存储first_name而不是字符串＆＃39; proposal.first_name＆＃39;）。

Answer 1

您需要删除TypeScript中proposal.firstname周围的引号。因为salutations是在.ts文件中声明的，而不是html，所以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。

Angular2 - 如何设置单选按钮选项以使用动态值

1 个答案: