Table custom component does not work inside an ion-slide

Hello good day, I have a problem with my custom table component since it does not render well inside the ion-slide that has an ion-card inside, I tried removing the ion-slide and it does not work either, the problem is that the buttons above if it renders them but the table does not, will anyone know why this happens?

home-html

<ion-slide> 
    <ion-card>
      <ion-card-header>
        <ion-card-title>
          <h3>ACCIONES INMEDIATAS "CORRECCIONES" </h3>
        </ion-card-title>
      </ion-card-header>
      <ion-card-content>
<app-asg-table [(data)]="dataHCAccionesInmediatas" *ngIf="dataHCAccionesInmediatas"></app-asg-table>
      </ion-card-content>
    </ion-card>
   </ion-slide>

component-html

<ion-content>
<ion-grid *ngIf="data.vista == 'table'" fixed>

        <ion-row style="margin-top: -5px;">

            <table class="{{data.classes}}">

                <thead>

                    <tr>

                        <th *ngFor="let field of data.fields" (click)="orderBy(data.list,field)">

                            <div class="float-right" *ngIf="field.type == 'decimal'">

                                <label>{{field.name}}</label>

                            </div>

                            <div *ngIf="field.type != 'decimal'">

                                <label>{{field.name}}</label>

                            </div>

                        </th>

                        <th *ngIf="thereIsActions()">

                            <div class="float-right">

                                <label>Acciones</label>

                            </div>

                        </th>

                    </tr>

                </thead>

                <tbody *ngFor="let obj of subList">

                    <tr *ngIf="subList.length < 1">

                        <td [colSpan]="data.fields.length + 1" style="text-align:center; background-color:gray">

                            <i>Nada para mostrar...</i>

                        </td>

                    </tr>

                    <tr *ngIf="subList.length > 0">

                        <td style="vertical-align:middle;" *ngFor="let field of data.fields">

                            <div class="float-right" *ngIf="field.type == 'decimal'">

                                {{getValueByProperty(obj, field.key).toFixed(2).replace('.', ',')}}

                            </div>

                            <div *ngIf="field.type != 'decimal' && field.type != 'html'">

                                {{getValueByProperty(obj, field.key)}}

                            </div>

                        </td>

                        <td style="vertical-align:middle" *ngIf="thereIsActions()">

                            <div class="float-right" *ngFor="let actionBtn of obj.actionButtons"

                                style="margin-bottom:0.2em">

                                <ion-button size="{{actionBtn.buttonSize}}" *ngIf="actionBtn.type == 'button'"

                                    color="{{actionBtn.buttonColor}}" (click)="actionBtn.action(obj)"

                                    title="{{actionBtn.title}}">

                                    <ion-icon slot="{{actionBtn.iconSlot}}" name="{{actionBtn.iconClasses}}" color="{{actionBtn.iconColor}}"></ion-icon>

                                   <a [ngStyle]="{'color': actionBtn.labelColor}">{{actionBtn.label}}</a> 

                                </ion-button>

                                <ion-radio *ngIf="actionBtn.type == 'checkbox' && obj.checked"

                                    (class)="actionBtn.buttonClasses" (click)="actionBtn.action(obj)"

                                    title="{{actionBtn.title}}">

                                    <ion-icon slot="{{actionBtn.iconSlot}}" name="{{actionBtn.iconClassesChecked}}" color="{{actionBtn.iconColor}}"></ion-icon>

                                    <a [ngStyle]="{'color': actionBtn.labelColor}">{{actionBtn.label}}</a>
                               </ion-radio>
                               <ion-radio *ngIf="actionBtn.type == 'checkbox' && !obj.checked"
                               (click)="actionBtn.action(obj)" title="{{actionBtn.title}}">
                               <ion-icon slot="{{actionBtn.iconSlot}}" name=" 
                                   {{actionBtn.iconClassesUnChecked}}" color="{{actionBtn.iconColor}}"> 
                                    </ion-icon>
                                    <a [ngStyle]="{'color': actionBtn.labelColor}">{{actionBtn.label}}</a>
                                </ion-radio>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </ion-row>
    </ion-grid>
</ion-content>

1 post - 1 participant

Read full topic