Как вывести список объектов и его вложенный список объектов внутри Angular-Nativesript ListView? - PullRequest
Новая
       17

Как вывести список объектов и его вложенный список объектов внутри Angular-Nativesript ListView?

0 голосов
/ 07 апреля 2019

Добрый день,

У меня возникла проблема в проекте общего кода 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
_________________________________________________

вот мои компоненты.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
_________________________________________________

Надеюсь, что кто-нибудь поможет мне в этом заранее спасибо за помощь

Ответы [ 2 ]

0 голосов
/ 07 апреля 2019

Попробуйте плагин nativescript-accordion . Если вам нравятся все элементы, которые будут расширены по умолчанию, создайте массив со всеми индексами и примените его к свойству selectedIndexes. 

tns plugin add nativescript-accordion
0 голосов
/ 07 апреля 2019

Я создал образец игровой площадки для вас здесь .На 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>
...