Angular *ngFor根据索引选择辅助选项

我有一个ngFor和一个t。它有一个t.product和4个价格选项[t.price，t.price1，t，price2，t.price3]

这一切对第一个t.price都很有效，但我不能根据单选按钮选择指数0到3将价格从t.price切换到t.price1等。如何根据指数值选择t.价格

试图构建另一个仅具有正确价格的阵列，但该阵列会生成错误，并且在ngFor循环中根本不会更新价格信息

<div id="mat-s" >
    <mat-selection-list #list [(ngModel)]="ChkBtnSelection" (ngModelChange)="onNgModelChange($event)">
      <mat-list-option dense *ngFor="let t of prodT" [value]="t.product" class="mat-list-item">  
        <div class="div_t">
          <p class="alignleft">{{t.product}}</p>
          <p class="alignright">  -- {{t.price | currency:'GBP'}}</p>
        </div> 
      </mat-list-option>
    </mat-selection-list>

---

一切都很好，但我可以将t.price切换到t.price2？数组中有t.price到t.price3。

使用structural directive*ngIf编写单独标记的解决方案是可行的，但有点麻烦。在视图中，我看不到解决它的任何好方法，但是将它转移到组件中是很容易的

比如,

<mat-selection-list>
  <mat-list-option *ngFor="let t of prodT">
    ...
    <p>{{getPrice(t)}}</p>
  </mat-list-option>
</mat-selection-list>

---

我在这里假设您的组件中已经有一个对您正在谈论的选项的引用。

请共享代码您迄今为止尝试过的唯一方法是：隐藏全部，只显示数组索引设置为true的部分。

-{t.price | currency:'GBP'}

-{t.price2}货币：'GBP'}

-{t.price3}货币：'GBP'}

-{t.price4}货币：{p>

请为单选按钮添加代码。你可以让单选按钮直接选择正确的价格作为一个值，而不是值的索引，然后绑定到这个选定的价格值。这就是我所做的，我想要一个更优雅的方法来解决这个问题。

getPrice(product) {
  // some logic here to get price selected option...
  return price
}