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

Question

美好的一天，

我在 angular-nativescript 共享代码项目中遇到问题。模型和组件工作正常，但输出不符合我的预期我认为问题出在我看来(Homecomponent.tns.html)

我有一个 angular 模型包含 object(products) 列表在 object(ProductGroup) 中，这里是结构

产品组：

export class ProductGroup {

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

产品项目：

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

我已经pre-populate它在我的组件 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 了产品组，它似乎已经填充并且应该可以正常工作。

但是我试图用组名的 header 输出列表视图中的所有 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

我已经为您创建了一个示例游乐场 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>

Answer 2

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

tns plugin add nativescript-accordion

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

How to output a List of object and its nested list of object inside Angular-Nativesript ListView?

android

nativescript

angular

angular-nativescript