Angular 2：如何在tag-input标签内编写嵌套循环

嘿，我看了你的代码，问题主要出在tag-input的ngModel绑定逻辑和ng-template里的子项渲染方式上，咱们一步步来修正：

1. 先理清数据绑定逻辑 #

你原来的代码给每个obj生成一个tag-input，但ngModel绑定的是[obj]（单个父对象），而tag-input需要的是要展示的子项数组，所以首先要把ngModel改成绑定父对象的children数组。同时，因为我们绑定的是对象而非字符串，要把modelAsStrings设为false。

2. 修正ng-template的子项渲染 #

原来的代码在模板里循环obj.children，会导致每个标签重复渲染所有子项——这显然不是你想要的。我们应该利用ng-template提供的let-item变量，它就是当前标签对应的单个子项，直接用它来渲染即可。

修正后的完整代码示例 #

<!-- 遍历每个父对象，生成对应的tag-input -->
<tag-input 
  *ngFor="let parentObj of objInputs"
  [ngModel]="parentObj.children"
  [modelAsStrings]="false"
  [editable]="false"
  #input
>
  <ng-template let-child="item" let-index="index">
    <div>
      <!-- 展示父对象的ParentOfParentvalue -->
      {{ parentObj.ParentOfParentvalue }} / 
      <!-- 展示当前子项的属性 -->
      {{ child.Parentvalue }} {{ child.value }}
      <delete-icon (click)="onItemRemoved(child, index)"></delete-icon>
    </div>
  </ng-template>
</tag-input>

如果需要把所有子项放在同一个tag-input里 #

如果你不想每个父对象单独生成一个tag-input，而是把所有父子结构的子项合并到一个组件里展示，可以先在组件类里把数据扁平化：

// 组件.ts文件
flatTagItems: any[] = [];

ngOnInit(): void {
  // 遍历父对象，把每个子项和父级属性合并
  this.objInputs.forEach(parent => {
    parent.children.forEach(child => {
      this.flatTagItems.push({
        ...child,
        parentOfParentValue: parent.ParentOfParentvalue
      });
    });
  });
}

然后模板里直接绑定扁平化后的数组：

<tag-input 
  [ngModel]="flatTagItems"
  [modelAsStrings]="false"
  [editable]="false"
  #input
>
  <ng-template let-item="item" let-index="index">
    <div>
      {{ item.parentOfParentValue }} / {{ item.Parentvalue }} {{ item.value }}
      <delete-icon (click)="onItemRemoved(item, index)"></delete-icon>
    </div>
  </ng-template>
</tag-input>

关键改动点总结 #

• 把ngModel从单个父对象改成绑定子项数组，让tag-input明确要展示的内容
• 利用ng-template的let-item获取当前标签对应的子项，避免重复循环所有子项
• 根据绑定的数据类型调整modelAsStrings（绑定对象设为false，绑定字符串设为true）

内容的提问来源于stack exchange，提问作者Hamad