ng-if如果不在angular md表上工作

Question

我正在使用angular md table Angular md table lib来显示表中的数据。

我必须根据单元格中的条件显示数据，所以我使用了ng-if但它没有在表列中显示任何内容。我想根据item.licReq的值显示不同的图标。

<mdt-table animate-sort-icon="true" ripple-effect="true" selectable-rows="false" table-card="{visible: true, title: 'License Screening', columnSelector: true}" paginated-rows="{isEnabled: true, rowsPerPageValues: [5,10,20,50]}">

    <mdt-header-row>

        <mdt-column align-rule="left" column-sort="true" column-definition="Screening Type"><span>Screening Type</span></mdt-column>
        <mdt-column align-rule="left" column-sort="true" column-definition="License Required"><span>License Required</span></mdt-column>
        <mdt-column align-rule="left" column-sort="true" column-definition="Status"><span>Status</span></mdt-column>

    </mdt-header-row>

    <mdt-row ng-repeat="item in licenseItems track by $index">       

        <mdt-cell><span>{{ item.screenType }}</span></mdt-cell>
        <mdt-cell><span>{{ item.licReq | liceReqFilter }}</span></mdt-cell>
        <mdt-cell><span> 
                        <span ng-if="item.licReq == 'N'">
                            <i class="fa fa-check-circle green" uib-tooltip="License is not required." aria-hidden="true"></i>
                        </span>
                        <span ng-if="item.licReq == 'P'">
                            <i class="fa fa-check-circle green" uib-tooltip="License provided." aria-hidden="true"></i>
                        </span>

                        <span ng-if="item.licReq == 'Y'">
                            <i class="fa fa-exclamation-circle red" uib-tooltip="License is required." aria-hidden="true"></i>
                        </span>
                        <span ng-if="item.licReq == 'E'">
                            <i class="fa fa-exclamation-circle red" uib-tooltip="License is expired." aria-hidden="true"></i>
                        </span>

                        <span ng-if="item.licReq == 'NA'">
                        <i class="fa fa-exclamation-triangle" uib-tooltip="Invalid ECCN number." aria-hidden="true"></i>
                    </span>
            </span>
        </mdt-cell>    
    </mdt-row>
</mdt-table>

如果我使用常规的html表格标签，则会正确显示离子。我也试过了角switch指令。

工作代码：

<table class="table table-bordered table-hover table-condensed" style="font-size: 12px">

    <thead>
        <tr style="background-color: #f9f9f9">
            <th>Sr</th>                                 
            <th>License Required</th>
            <th>Status</th>          
        </tr>
    </thead>

    <tbody>         
        <tr ng-repeat="item in licenseItems track by $index">
            <td>{{$index + 1}}</td>                                 
            <td>{{item.licReq | liceReqFilter}}</td>
            <td>
                <span ng-if="item.licReq == 'N'">
                    <i class="fa fa-check-circle green" uib-tooltip="License is not required." aria-hidden="true"></i>
                </span>
                <span ng-if="item.licReq == 'P'">
                    <i class="fa fa-check-circle green" uib-tooltip="License provided." aria-hidden="true"></i>
                </span>

                <span ng-if="item.licReq == 'Y'">
                    <i class="fa fa-exclamation-circle red" uib-tooltip="License is required." aria-hidden="true"></i>
                </span>
                <span ng-if="item.licReq == 'E'">
                    <i class="fa fa-exclamation-circle red" uib-tooltip="License is expired." aria-hidden="true"></i>
                </span>

                <span ng-if="item.licReq == 'NA'">
                    <i class="fa fa-exclamation-triangle" uib-tooltip="Invalid ECCN number." aria-hidden="true"></i>
                </span>
            </td>

        </tr>

    </tbody>    
</table>