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

Question

I am trying to display label and input field side by side and in another case trying to display checkbox and label side by side.

I have searched, I've got to see it's the ionic framework issue, is this true? And I tried with switch and ngcontainer and div's but it did not work out.

"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",
    }]
  }]

The above is my json.

The below is my .html code

<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>

The ionlabel text is not getting displayed, when I tried to print with h2 tag then the label is getting displayed.

Can someone help me out how to solve the problem?

UPDATE

I have updated my code and placed it here https://stackblitz.com/edit/ionic-ijwxbh?embed=1&file=pages/home/home.html

Answer 1

Don't know what is the functionality of checkIsOtherGroup(filter) . change *ngif to *ngIf . Then you can see the text inside ion-label. See this example .

UPDATE

Add item-content to the div element as follows.

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

Answer 2

Look at the expression inside the *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>