如何在Angular-Nativesript ListView中输出对象列表及其嵌套对象列表？

Question

日安，

我在angular-nativescript共享代码项目中遇到了问题。模型和组件运行良好，但输出不是我所期望的，我认为问题出在我的观点(Homecomponent.tns.html)。

我有一个角度模型包含一个对象(产品)的列表中的一个对象(ProductGroup)这里是结构

产品组：

export class ProductGroup {

    public groupName : string;
    public products : ProductItem[];
}

ProductItem：

export class ProductItem {
    public itemDescription : string;
    public remarks : string;
}

我已经在我的组件ngOnInit中预先填充了它

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {

  public productGroups : ProductGroup[];
 ngOnInit() {
      ///initiate group
      this.productGroups = [];
      ///insert some items for testing
      this.productGroups.push
    (
      {
        groupName : "Cars",
        products : [
          { itemDescription : "Car", remarks : "" },
          { itemDescription : "Car1",remarks : "" },
          { itemDescription : "Car2",remarks : "" }
        ]
       },
       { groupName : "Trucks",products : [
          { itemDescription : "Truck", remarks : "" },
          { itemDescription : "Truck1",remarks : "" },
          { itemDescription : "Truck2", remarks : ""}]
       }       
    );     
     //trying to check if it is properly populated
    console.log(this.productGroups);
   }
}

我已经console.log了产品组，它看起来是填充的，应该工作得很好。

但是我尝试输出包含组名标题的列表视图中的所有productItem，但它只像这样输出

_________________________________________________
Cars
Car
_________________________________________________
Trucks
Truck
_________________________________________________

这是我的components.tns.html

<ActionBar>
    <ActionItem title="Test"></ActionItem>
</ActionBar>
<StackLayout>




<GridLayout   columns="*" >
    <ListView [items] = "productGroups">
      <ng-template let-group="item" >
        <StackLayout>
          <Label [text]="group.groupName"></Label>
             <StackLayout>
               <ListView  [items] = "group.products">
                 <ng-template let-products="item">
                     <Label [text]="products.itemDescription"></Label>                             
                  </ng-template>                                                        
               </ListView>   
              </StackLayout>
         </StackLayout>
       </ng-template>                          
    </ListView>
</GridLayout>
</StackLayout>

我希望我的问题对你们有意义。我只是希望得到这样的输出

_________________________________________________
Cars
Car
Car1
Car2
_________________________________________________
Trucks
Truck
Truck1
Truck2
_________________________________________________

希望有人能帮我解决这个问题，提前感谢你的帮助

Answer 1

试试nativescript-accordion插件。如果希望默认情况下展开所有项，请创建一个包含所有索引的数组，并将其应用于selectedIndexes属性。

tns plugin add nativescript-accordion

Answer 2

我已经为你创建了一个样例游乐场，here。它在ios上运行得很好。

<GridLayout>
    <ListView class="list-group" [items]="productGroups" (itemTap)="onItemTap($event)"
        style="height:1250px">
        <ng-template let-group="item">
            <StackLayout >
                <Label [text]="group.groupName"></Label>
                <StackLayout>
                    <ListView [items]="group.products">
                        <ng-template let-products="item">
                            <Label [text]="products.itemDescription"></Label>
                        </ng-template>
                    </ListView>
                </StackLayout>
            </StackLayout>
        </ng-template>
    </ListView>
</GridLayout>