0

再会，

我在 angular-nativescript 共享代码项目中遇到问题。模型和组件工作正常，但输出不像我预期的那样我认为问题出在我的观点（Homecomponent.tns.html）

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

产品组：

export class ProductGroup {

    public groupName : string;
    public products : 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);
   }
}

我已经对产品组进行了控制台记录，它似乎已填充并且应该可以正常工作。

但我试图用组名的标题输出listview中的所有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
_________________________________________________

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

4

2 回答 2

0

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

tns plugin add nativescript-accordion
于 2019-04-07T10:48:59.237 回答
0

我在这里为您创建了一个示例游乐场。它在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>
于 2019-04-07T07:09:48.173 回答