Question

我尝试了ng-hide和ng-if，无论我做什么，控制台日志都会显示一个带有空值的图像，如下所示：

%7B%7B%20bookings.country%20%7D%7D.png:1 
GET http://localhost:8080/img/flagNations/%7B%7B%20bookings.country%20%7D%7D.png 
404 (Not Found)

以下是导致此问题的代码：

<table class="start-table" ng-if="vm.doubleBookings.length > 0">
<tbody>
    <tr ng-repeat="bookings in vm.doubleBookings" class="start-text">
        <td class="start-left">
            <img src="./img/flagNations/{{ bookings.country }}.png" class="start-flag">
            <b class="start-country">{{ bookings.country | uppercase }}</b> 
            {{ bookings.name }}
        </td>
    </tr>
</tbody>
</table>

即使您没有数据，它仍然会尝试渲染图像，它完全忽略了ng-if="vm.doubleBookings.length > 0"

要确认，这是来自我的控制器

    }).then(function successCallback(result) {
        console.log('from getDoubleBooking: ' + JSON.stringify(result.data.res, null, 4))
        var res = result.data.res;
        console.log("LENGTH RES: " + res.doubleBooking.length)
        vm.doubleBookings = res.doubleBooking; 
        console.log("LENGTH VM: " + vm.doubleBookings.length)

给出了结果

from getDoubleBooking: {
    "doubleBooking": [],
    "sameDayBooking": []
}
LENGTH RES: 0
LENGTH VM: 0

我真的无法想出这一个 - 为什么它应该渲染图像毫无意义？！？

我甚至试过这个：

<img ng-if="vm.doubleBookings.length > 0" src="./img/flagNations/{{ bookings.country }}.png" class="start-flag">

同样的结果。

这是控制器的一个更大的部分：

// 
// Find Double Bookings and Same Day Bookings
// 
var findDoubleBooking = () => {
    return new Promise((resolve, reject) => {
    $http({
        method: 'POST',
        url: globalSetting.serverURL + 'manager/getDoubleBooking',
        headers: { 'Content-Type': 'application/json' },
        data: {"checkout" : 5299014799}
    }).then(function successCallback(result) {
        console.log('from getDoubleBooking: ' + JSON.stringify(result.data.res, null, 4))
        var res = result.data.res;
        console.log("LENGTH RES: " + res.doubleBooking.length)
        vm.doubleBookings = res.doubleBooking; 
        console.log("LENGTH VM: " + vm.doubleBookings.length)
        vm.sameDayBookings = res.sameDayBooking; 
        console.log("LENGTH VM: " + vm.sameDayBookings.length)

        resolve();
    }, function errorCallback(err) {
        reject(new Error('getDoubleBooking ERROR : ' + err));
    });
})};

这是整个HTML细分

<!--Double Bookings Table-->
<table border="0" cellspacing="0" cellpadding="0" class="start-table start-double-table" ng-if="vm.doubleBookings.length > 0">
<tbody>
    <tr class="start-header start-bold start-double-bg">
        <td colspan="5" class="start-padding overflow">
            DOUBLE BOOKINGS - FIX THEM NOW!
        </td>
    </tr>
    <tr class="start-header start-head start-double-bg">
        <td class="start-left nowrap" style="min-width:76px;">Property</td>
        <td class="start-center overflow" style="width:13%">Checkin</td>
        <td class="start-center overflow" style="width:13%">Checkout</td>
        <td class="start-left overflow" style="width:44%">Tenant</td>
        <td class="start-right overflow" style="width:10%">Paid</td>
    </tr>

    <tr ng-repeat="bookings in vm.doubleBookings" class="start-text">
        <td class="start-left start-border nowrap" ng-class="{'start-double': !$last && bookings.property !== vm.doubleBookings[$index + 1].property}">
            <span class="chan-{{ bookings.source }}">{{ bookings.source }}</span>&nbsp;{{ bookings.property }}
        </td>
        <td class="start-center start-border overflow" ng-class="{'start-double': !$last && bookings.property !== vm.doubleBookings[$index + 1].property}">{{bookings.checkin*1000 | date : 'dd MMM' }}</td>
        <td class="start-center start-border overflow" ng-class="{'start-double': !$last && bookings.property !== vm.doubleBookings[$index + 1].property}">{{bookings.checkout*1000 | date : 'dd MMM' }}</td>
        <td class="start-left start-border overflow" ng-class="{'start-double': !$last && bookings.property !== vm.doubleBookings[$index + 1].property}">
            <img ng-if="vm.doubleBookings.length > 0" src="./img/flagNations/{{ bookings.country }}.png" class="start-flag">
            <b class="start-country">{{ bookings.country | uppercase }}</b> 
            {{ bookings.name }}
        </td>
        <td class="start-right start-border overflow" ng-class="{'start-double': !$last && bookings.property !== vm.doubleBookings[$index + 1].property}">{{ bookings.paidAlready }}</td>
    </tr>
</tbody>
</table>
<div class="spacer" ng-if="vm.doubleBookings.length > 0"></div>

Answer 1

而不是

<img src="./img/flagNations/{{ bookings.country }}.png">

我将src=更改为ng-src=

<img ng-src="./img/flagNations/{{ bookings.country }}.png">

问题已经消失！

ng-repeat中的破碎图像不会消失

1 个答案: