在我的代碼咨詢服務之前，我試圖在我的 HTML FORM 上顯示不同的 CSS 樣式，并在其回應時再次將其更改回來。每當布林值為真時，我都會使用ng-class動態添加類。activeload1遺憾的是，這從未反映在我的 HTML 中。我故意使服務呼叫達到例外，以查看類更改是否發生并且確實發生了（它只是掛在負載 css 上，因為它由于例外而從未達到類停用）。如何在我的 HTML 上反映 CSS 類的更改/添加？該代碼似乎只是將true值分配給activeload1布爾咨詢服務，然后false再次分配而不反映任何內容。我的代碼：
HTML：
<div id="divPrincipal" class="wrapper" ng-class="{loading1:bravosCtrl.activeload1}"> </div>
JS 中的函式片段。檔案：
this.buscar = function(){
this.activeload1 = true;
if (this.busqueda){
this.usuarioService.buscarUsuario(this.busqueda,this.userSession).then((usuariosE) => {
console.log("SUCCESS");
});
this.activeload1=false;
}else{
this.activeload1=false;
this.searchError = true;
}
};
CSS：
.wrapper {
border-radius: 10px;
background: #24CDD1;
padding: 25px;
max-width: 680px;
margin: 0 auto;
margin-bottom: 20px;
box-shadow: 2px 8px 8px rgb(0 0 0 / 10%);
position: relative;
}
.wrapper.loading1::before {
content: '';
background: url('https://i.imgur.com/sdK5jNw.gif') no-repeat center center;
width: 32px;
height: 32px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
.wrapper.loading1::after {
content: '';
background: #24CDD1;
display: inline-block;
opacity: .65;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999;
}
uj5u.com熱心網友回復：
$http 服務請求是異步的。從代碼中，您將activeload1立即分配為 false 而無需等待 http 回應回傳。
要在 $http 服務回應時設定activeload1為 false，只需將其添加到成功回呼函式即可。
this.usuarioService.buscarUsuario(this.busqueda,this.userSession).then((usuariosE) => {
console.log("SUCCESS");
this.activeload1=false; // added here
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/490620.html