Angular 2：如何在标签输入中编写嵌套循环

Question

使用 Angular 2 我正在尝试使用标签输入来显示父子对象，如下所示：

<tag-input *ngFor="let obj of objInputs" [ngModel]="[obj]" [modelAsStrings]="true" [editable]='false' #input>
  <ng-template let-item="item" let-index="index">
    <!-- DEFINE HERE YOUR TEMPLATE -->
    <div>
      {{obj.ParentOfParentvalue}} / <span *ngFor="let child of obj.children"> {{child.Parentvalue}} {{child.value}} <delete-icon (click)="onItemRemoved(child, index)"></delete-icon></span>
    </div>
  </ng-template>
</tag-input>

上面的代码在 2 级工作，但是当我尝试在第三级添加循环时，没有出现如下情况：

<tag-input *ngFor="let obj of objInputs" [ngModel]="[obj]" [modelAsStrings]="true" [editable]='false' #input>
  <ng-template let-item="item" let-index="index">
    <!-- DEFINE HERE YOUR TEMPLATE -->
    <div>
      {{obj.ParentOfParentvalue}} / <span *ngFor="let child of obj.children"> {{child.Parentvalue}}</span> :<span *ngFor="let lastchild of child.children"> {{lastchild.value}} <delete-icon (click)="onItemRemoved(child, index)"></delete-icon></span>
    </div>
  </ng-template>
</tag-input>

任何帮助谢谢

Answer 1

因为第 3 个循环没有嵌套在 <span *ngFor="let child of obj.children">

中

如果您没有正确嵌套，那么 Angular 将尝试在不同的上下文中查找 child 对象。并且因为没有找到，所以没有什么可显示的

Angular 2：如何在标签输入中编写嵌套循环

Angular 2: How to write nested Loop inside tag-input

angular2-template

angular