Question

我有一个带t的ngFor。其中有t.product和4个价格选项[t.price,t.price1,t,price2,t.price3]

这一切对于第一个t.price都很好用，但是我无法基于单选按钮选择索引0到3将价格从t.price切换到t.price1等。如何基于索引值？

试图构建另一个仅具有正确价格但会产生错误且根本不更新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。

Answer 1

您使用结构指令* ngIf编写单独标签的解决方案可以工作，但有点麻烦。我在视图中看不到解决它的任何好方法-但将其轻松转移到组件中

例如；

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

无论何时呈现视图，都会调用getPrice方法，该方法将为对象提供所需的所有信息。然后，您可以在组件方法中添加任何您想返回仅想要价格的逻辑：

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

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

* ng用于基于索引选择辅助选项

1 个答案: