Question

美好的一天，

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

我有一个角度模型，其中包含一个对象（产品组）内的对象（产品）列表，这里是结构

产品组：

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

我为您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中输出对象的列表及其嵌套的对象列表？

2 个答案: