根据 Angular 同一行中 select 的 selected 值更改 table 单元格值
Change table cell value according to selected value from a select within the same row in Angular
我有 table 项服务,其中每一行包含一个 drop-down,每个条目都是一种服务类型。服务类型包含标题和费用。每当我 select 每行的服务类型时,我想显示相应的成本。
<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>
我试过这个解决方案,它对我有用:
<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>
我有 table 项服务,其中每一行包含一个 drop-down,每个条目都是一种服务类型。服务类型包含标题和费用。每当我 select 每行的服务类型时,我想显示相应的成本。
<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>
我试过这个解决方案,它对我有用:
<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>