如何使用 Angular 对数组元素进行数据绑定答案

【问题标题】：How to data-bind an array element with Angular如何使用 Angular 对数组元素进行数据绑定
【发布时间】：2021-10-22 04:20:23
【问题描述】：

我正在使用 Angular。

我有一个有两列的表。第一列的每个单元格都是一个序列号。第二列的每个单元格都是序列号的下拉列表。我正在绑定到组件中的数据源，它工作正常。

我的数据源是我的组件中的一个简单的硬编码数组（我有多少我喜欢的元素，这里我只展示一个）：

toolSeries = {
    "Series": "12345678A",
    "Serials" : ["123321", "123321", "54654", "357", "386758"],
}

我的绑定是这样的：

<tr *ngFor='let tools of toolSeries' height="50px">
    <td class="tableEntryText">{{tools.Series}}</td>
    <td class="tableEntryText">
        <select class="noBorder additionalSelectStyle" name="filter_for" (change)="OnSerialChanged($event.target)">
            <option *ngFor = 'let serial of tools.Serials'>
                {{serial}}
            </option>
        </select>
    </td>
<tr>

一切都好，工作正常。

现在我需要添加以下内容：每个工具序列都可以有一个“状态”。所以我像这样修改我的数据结构：

toolSeries = [
  {
    "Series": "12345678A",
    "Serials" : ["199921", "123321", "54654", "357", "386758"],
    "State": ["OK","BAD","BAD","UNKNOWN", "OK"]
  },

所以，我在我的 HTML 表中添加了另一列，现在我的代码变为：

<tr *ngFor='let tools of toolSeries' height="50px">
    <td class="tableEntryText">{{tools.Series}}</td>
    <td class="tableEntryText">
        <select class="noBorder additionalSelectStyle" name="filter_for" (change)="OnSerialChanged($event.target)">
            <option *ngFor = 'let serial of tools.Serials'>
                {{serial}}
            </option>
        </select>
    </td>
    <td class="tableEntryText">
        <label class="labelAdjust">{{series.State[0]}}</label>
    </td>
</tr>

现在，{{series.State[0]}} 将意味着新字段始终显示每个序列的第一个状态的值。

问题：我应该如何编写绑定，以便字段的状态将反映在下拉列表中选择的序列的状态？例如，当用户从下拉列表中选择“123321”时，我的新列的单元格应显示“BAD”而不是“OK”。

感谢您的帮助。

【问题讨论】：

标签： html angular typescript data-binding

【解决方案1】：

这里还有一些其他的考虑，但是快速而肮脏的方式来做你想做的事，

<select [(ngModel)]="selectedValue" class="noBorder additionalSelectStyle" name="filter_for" (change)="OnSerialChanged($event.target)">
    <option *ngFor = 'let serial of tools.Serials' [ngValue]="serial">
        {{serial}}
    </option>
</select>

<td class="tableEntryText">
    <label class="labelAdjust">{{tools.State[tools.Serials.indexOf(selectedValue)]}}</label>
</td>

您必须将一个值绑定到您的select，以便您知道所选选项是什么，然后您需要在tools.Serials 数组中找到该值的索引并使用tools.State 中的该索引来获取对应的状态。您还需要在.ts 文件中声明selectedValue 变量，

public selectedValue: number;

请记住，这假设 tools.Serials 和 tools.State 具有相同数量的元素。如果它们不同步，您可能会遇到错误。

更好的解决方案可能是重新考虑您的数据结构，并以更直接的方式将状态与其序列关联起来。

【讨论】：

【解决方案2】：

Stackblitz

我的方法与此处的@DKidwell 答案非常相似，但不是保存和查找所选 tool.serial 的值。我将所选 tool.serial 的索引保存在 ngModel 中，并在同一索引上检索 tool.State 值（如果存在），否则 tool.State 中没有错误且没有值。因此，即使这些数组的长度不匹配，您的代码也可以工作，但如果这将变得更加复杂，重新考虑您的数据结构可能仍然是一个好主意。

<select class="noBorder additionalSelectStyle" name="filter_for" [(ngModel)]="selectedSerial">
  <option value="" disabled>Select a  serial</option>
  <option *ngFor = 'let serial of tools?.Serials; let i = index' [value]="i">
    {{serial}}
</option>
</select>
  </td>
  <td class="tableEntryText">
      <label class="labelAdjust">{{(tools?.State[selectedSerial]) ||  ''}} </label>
  </td>
</tr>

【讨论】：

【解决方案3】：

非常感谢你们花时间回答，我非常感谢。你的回答教会了我很多。最后，我确实将数据结构更改为能够使用更少数据绑定代码的数据结构。

【讨论】：