Question

我正在尝试并排显示标签和输入字段在另一种情况下，尝试并排显示复选框和标签。

我进行了搜索，发现这是离子骨架问题，对吗？我尝试使用switch，ngcontainer和div，但是没有成功。

"filters_list" : [
    {
    title: "Group Name 1",
    typeOfGroupUI: "1",
    filters: [{
      title: "Sub-Filter1",
      typeOfUI: "1",
    }, {
      title: "Sub-Filter2",
      typeOfUI: "1",
    }, {
      title: "Sub-Filter3",
      typeOfUI: "1",
    }, ]
  }, {
    title: "Group Name 2",
    typeOfGroupUI: "2", 
    filters: [{
      title: "Score",
      typeOfUI: "2",
    }]
  }]

上面是我的json。

以下是我的.html代码

<div *ngFor="let filter of filters_list; let i=index" style="height: 100%;">
    <div *ngFor="let subFilter of filter.filters; let i=index">
      <div *ngIf="checkIsOtherGroup(filter)  else otherGroup">
        <ion-list class="inner-listview">
        </ion-list>
      </div>
      <ng-template #otherGroup>
        <div *ngIf"subFilter.typeOfUI == 1">
          **<ion-label>{{subFilter.title}}</ion-label>**
        </div>
      </ng-template>
    </div>
  </div>

ionlabel文本没有显示，当我尝试使用h2标签打印时，该标签正在显示。

有人可以帮我解决问题吗？

更新

我已更新代码并将其放在此处 https://stackblitz.com/edit/ionic-ijwxbh?embed=1&file=pages/home/home.html

Answer 1

不知道checkIsOtherGroup(filter)的功能是什么。将*ngif更改为*ngIf。然后，您可以看到离子标签内的文本。参见此example。

更新

如下所示，将item-content添加到div元素。

                    <div item-content *ngIf="subFilter.typeOfUI ==1">
                        <ion-label>{{subFilter.title}}</ion-label>
                        <ion-input type="text" value=""></ion-input>
                    </div>

Answer 2

查看*ngIf内的表达式：

<div *ngFor="let filter of filters_list; let i=index" style="height: 100%;">
    <div *ngFor="let subFilter of filter.filters; let i=index">
      ̶<̶d̶i̶v̶ ̶*̶n̶g̶I̶f̶=̶"̶c̶h̶e̶c̶k̶I̶s̶O̶t̶h̶e̶r̶G̶r̶o̶u̶p̶(̶f̶i̶l̶t̶e̶r̶)̶ ̶ ̶e̶l̶s̶e̶ ̶o̶t̶h̶e̶r̶G̶r̶o̶u̶p̶"̶>̶
      <div *ngIf="checkIsOtherGroup(filter) || otherGroup">
        <ion-list class="inner-listview">
        </ion-list>
      </div>
      <ng-template #otherGroup>
        ̶<̶d̶i̶v̶ ̶*̶n̶g̶i̶f̶"̶s̶u̶b̶F̶i̶l̶t̶e̶r̶.̶t̶y̶p̶e̶O̶f̶U̶I̶ ̶=̶=̶ ̶1̶"̶>̶
        <div *ngIf="subFilter.typeOfUI == 1">
          **<ion-label>{{subFilter.title}}</ion-label>**
        </div>
      </ng-template>
    </div>
</div>

ngFor内部的ionlabel和ioncheckbox不起作用ngFor内部的

2 个答案: