根据在Angular中同一行中的选择，根据所选值更改表单元格的值

Question

我有一个服务表，其中每一行都包含一个下拉列表，并且每个条目都是一种服务类型。服务类型包含标题和费用。每当我为每行选择一种服务类型时，我都希望显示相应的费用。

<table class="table table-striped table-responsive table-hover">
  <tr>
    <th>Service name</th>
    <th>Service type</th>
    <th>Price</th>
    <th></th>
  </tr>
  <tr *ngFor="let service of content.services">
    <td>{{service.title.fr}}</td>
    <td>
      <select name="servicetype" class="form-control" [(ngModel)]="selectedServiceType" (change)="showPrice($event)">
        <option value=""></option>
        <option *ngFor="let type of service.servicetypes" [ngValue]="type">
          {{type.title.fr}}
        </option>
      </select>
    </td>
    <td></td>
    <td><input name="service" type="radio" (change)="selectThisService(service)"></td>
  </tr>
</table>

Answer 1

要查看每一行的不同成本，需要在用户选择服务类型后将成本分配给服务对象

所以您的代码应该是

<table class="table table-striped table-responsive table-hover">
  <tr>
    <th>Service name</th>
    <th>Service type</th>
    <th>Price</th>
    <th></th>
  </tr>
  <tr *ngFor="let service of content.services">
    <td>{{service.title.fr}}</td>
    <td>
      <select name="servicetype" class="form-control" [(ngModel)]="selectedServiceType" (change)="showPrice(service,)">
        <option value=""></option>
        <option *ngFor="let type of service.servicetypes" [ngValue]="type">
          {{type.title.fr}}
        </option>
      </select>
    </td>
    <td>{{service.cost}}</td>
    <td><input name="service" type="radio" (change)="selectThisService(service)"></td>
  </tr>
</table>

然后输入component.ts

showPrice(service){
   service.cost=selectedServiceType.cost;
}

Answer 2

我尝试了此解决方案，并且对我有用：

<table class="table table-striped table-responsive table-hover">
      <tr>
        <th>Service name</th>
        <th>Service type</th>
        <th>Price</th>
        <th></th>
      </tr>
      <tr *ngFor="let service of content.services; let i = index">
        <td>{{service.title.fr}}</td>
        <td>
          <select name="servicetype" class="form-control"[(ngModel)]="selectedServiceType[i]">
            <option value=""></option>
            <option *ngFor="let type of service.servicetypes" [ngValue]="type">
              {{type.title.fr}}
            </option>
          </select>
        </td>
        <td>
          <div *ngIf="selectedServiceType[i]">
            {{selectedServiceType[i].cost}}
          </div>
        </td>
        <td><input name="service" type="radio" (change)="selectThisService(service)"></td>
      </tr>
    </table>