ng-show видно при загрузке страницы

Question

, когда появляется сообщение о загрузке страницы, и оно исчезает, поскольку активное значение изначально равно false. Я пытался с нг-если, нг-плащ, но безуспешно:

HTML

<div ng-show="!item.active" class="dialog-expired-calculation alert alert-danger" role="alert" ng-cloak>
    <h4 class="redText boldText" translate="parkingPlace.inactive-title"></h4>
</div>

TS

 calculations.forEach(calc => {
        calc.active = version.active;
  });

Answer 1

Это сработало для меня с изменениями ниже, потому что во время загрузки страницы перед извлечением данных из логического значения контроллера установлено значение true и какое-то время появляется сообщение

TS: calc.active = version.active; calc ['showmessage'] =! version.active;

Html: нг-шоу = "item.showmessage"

Answer 2

Предполагая, что вы используете angular 1.x - вы можете определить флаг loading и, пока это правда, скрывать / показывать ту часть экрана, которую вы хотите.

Что-то подобное может работать -

// at the top of the page
$scope.loading = true;

// make your http calls, calculations, etc.
calculations.forEach(calc => {
    calc.active = version.active;
});


// once all http calls and calculations are done
$scope.loading = false;

// HTML

<div ng-show="!loading && !item.active" class="dialog-expired-calculation alert alert-danger" role="alert" ng-cloak><h4 class="redText boldText" translate="parkingPlace.inactive-title"></h4></div>

Или вы также можете использовать ng-if в дополнение к ng-show

<div ng-if="!loading" ng-show="!item.active" class="dialog-expired-calculation alert alert-danger" role="alert" ng-cloak><h4 class="redText boldText" translate="parkingPlace.inactive-title"></h4></div>

Answer 3

Вы пытались объявить это в своем init:

init() { $scope.item.active = true };
init();

Answer 4

В Angular2 + нет ng-show.используйте ngIf следующим образом:

<div *ngIf="!item.active" class="dialog-expired-calculation alert alert-danger"
 role="alert">
    <h4 class="redText boldText" translate="parkingPlace.inactive-title"></h4>
</div>