多选选择相同的选项

Posted 2023-03-13

【中文标题】多选选择相同的选项

【英文标题】：multiple selects select the same option

【发布时间】：2021-06-14 18:53:45

【问题描述】：

在我的项目中，我有一个表格，其中根据之前的选择插入了各种干预措施。在更多干预的情况下，如果我在第一次干预时选择一个值，则在第二次干预时它也会改变。如何使选择独立？

summary.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<table class="table table-hover table-bordered table-striped" style="display: contents;">
  <caption></caption>
  <thead style="background:#ce5e59; color: white;">
    <tr>
      <th scope="colgroup">Interventions:</th>
      <th scope="colgroup">Surface Type:</th>
      <th scope="colgroup">Price:</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let element of intervention; index as j">
      <tr>
        <td>element.int.code</td>

        <td>
          <select multiple [(ngModel)]="surface_type">
            <option selected disabled [value]="0">Select</option>
            <option [value]="1" [attr.disabled]="element.priceVis === 0 ? 'disabled' : null">Visible Surface</option>
            <option [value]="2" [attr.disabled]="element.pricePlast === 0 ? 'disabled' : null">Plastered Surface</option>
            <option [value]="3" [attr.disabled]="element.priceBoth === 0 ? 'disabled' : null">Both Surface</option>
          </select>
        </td>

        <td *ngIf="surface_type == 0"></td>
        <td *ngIf="surface_type == 1">element.priceVis€/element.unit</td>
        <td *ngIf="surface_type == 2">element.pricePlast€/element.unit</td>
        <td *ngIf="surface_type == 3">element.priceBoth€/elemento.unit</td>
      </tr>
    </ng-container>
  </tbody>
</table>

summary.ts

intervention: Intervention[] = []
surface_type: number: 0

【问题讨论】：

你能把 sn-p 设为minimal reproducible example 吗？例如添加您的元素

将所有[value]="X" 替换为value="X"，一切都会为您工作

【参考方案1】：

<option [value]="1" [attr.disabled]="element.priceVis === 0 ? 'disabled' : null">Visible Surface</option>

[] 作为属性将是数据与 "" 内部变量的单向绑定

因此，对于您的情况，[value]="1" 意味着您将变量 1 分配给 value 属性，而不是将值 1 分配给 value 属性。

要做到这一点，你必须写成

value="1"

所以最后，你的代码应该是这样的

<option value="1" [attr.disabled]="element.priceVis === 0 ? 'disabled' : null">Visible Surface</option>

您必须对所有 option 标记进行类似的更改才能使其正常工作。

请查看angular's property binding的文档了解更多详情。

还有

对于变量surface_type，所有循环都相同。因此，您要么必须将其更改为数组，就像 Erik 评论的那样。否则您将不得不在每个对象 inisde intervention 数组上保留一个变量 surface_type。并将每个实例替换为

element.surface_type

你的界面Intervention应该是这样的

interface Intervention 
   ... your objects ...
   surface_type: number|string

【讨论】：

我在上面评论过，将 [j] 放入 surface_type 会给我一个错误

按照我的建议尝试将它用作数组内对象的键

【参考方案2】：

您生成的<select> 元素都将它们选择的值存储在surface_type 变量中。您可以通过将ngModel 语句更改为：[(ngModel)]="surface_type[j]" 将surface_type 更改为数组，其中我使用*ngFor 中的j 索引。

【讨论】：

好的，这是有道理的，但它给了我这个错误TypeError: Cannot create property '0' on number '0' at SummaryComponent_ng_container_24_Template_select_ngModelChange_5_listener (summary.component.html:27)，这将与<select [(ngModel)]="surface_type[j]"> 一致

【参考方案3】：

正如 Erik 所说，您需要将 ngModel 设为一个数组：

<select multiple [(ngModel)]="surface_types[j]">

其次 - 你需要将 FormsModule 包导入到你的 Angular 模块中：

import  FormsModule  from '@angular/forms';

@NgModule(
    imports: [
         FormsModule      
    ]

我在 Stackblitz 上创建了 Sandbox，您可以检查一下：

https://stackblitz.com/edit/angular-qsxgaz?file=src%2Fapp%2Fproduct-list%2Fproduct-list.component.html