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

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

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

那么我怎样才能使选项 4 动态化（以便在选择时它存储 first_name 而不是字符串 'proposal.first_name'）。

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。