时间戳

首页 > 解决方案 > Angular 5：带有嵌套选择选项的 ngFor

angular - Angular 5：带有嵌套选择选项的 ngFor

问题描述

我有一个对象数组。这些对象具有属性版本。版本是一个字符串数组。

我遍历对象。对于每个对象，我都希望有一个包含所有可用版本的下拉字段。

如果用户更改版本，我想将整个对象推送到我的 changeSelectedItem() 函数。

我能够将“[object Object]”打印到控制台。正如我所看到的，[object Object] 已经被推送到我的函数中。

我怎样才能实现我想要的功能？

我的 HTML：

<tr *ngFor="let object of storeFilesService.objects">
      <td><input type="checkbox" value="a" (click)="checkobject(object)" name="checkbox" [checked]="true">
      </td>
      <td>{{object.id}}</td>
      <td>{{object.name}}</td>
      <td>{{object.version}}
        <select (change)="changeSelectedItem($event.target.value)">
          <option *ngFor="let version of object.versions" value={{object}}>
            {{version}}
          </option>
        </select>
      </td>

TS

      changeSelectedItem(filterVal: any) {
    console.log(filterVal);
  }

标签： angularngfor

解决方案

这应该像这样工作：

<tr *ngFor="let object of storeFilesService.objects">
  <td><input type="checkbox" value="a" (click)="checkobject(object)" name="checkbox" [checked]="true">
  </td>
  <td>{{object.id}}</td>
  <td>{{object.name}}</td>
  <td>{{object.version}}
    <select >
      <option *ngFor="let version of object.versions" (click)="changeSelectedItem(version)">
        {{version}}
      </option>
    </select>
  </td>
</tr>

发生了什么变化：

  • 选择时删除（更改）
  • 在选项上应用 (click)="changeSelectedItem(version)"

推荐阅读