There are three conditional div elements on a page, each meant to be displayed based on specific conditions.
<div *ngIf="isAvailable=='true'">
<form>
<div class="form-group">
<label for="Admin">Deployment Admin</label>
<input type="text" class="form-control" id="name" name="name" aria-describedby="name" [(ngModel)]="NewDeployAdmin.name">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="email" name="email" aria-describedby="email" placeholder="Enter email" [(ngModel)]="NewDeployAdmin.email">
</div>
<div class="form-group">
<label for="exampleInputPassword">Password</label>
<input type="password" class="form-control" id="paswsword" name="password" placeholder="Password" placeholder="Enter al least 6 character" [(ngModel)]="NewDeployAdmin.password">
</div>
<button type="submit" class="btn btn-primary" (click)="fnCreateDeployAdmin()">Submit</button>
</form>
</div>
<div *ngIf="isAvailable=='false'">
<button type="submit" class="btn btn-warning" (click)="fnDisableAccount()">Disable Account</button> | <button type="submit" class="btn btn-primary" (click)="fnUpdateDeployAdmin()">Reset Credential</button>
</div>
The .ts file handles the setting of the isAvailable value under different conditions to control the display of corresponding div elements. However, there seems to be an issue with this logic not working as expected.
The code snippet below shows how the isAvailable value is being set:
isDeploymentAdminAvailable(deployment){
let customQuery = {
equalTo: this.selectedDeploy.key
}
this.authService.fnGetDataUsingCustomQuery(FirebaseDb.firebasedeploymentAdminTable, customQuery).subscribe(
(rec: any) => {
rec.forEach((reccord: any) => {
reccord.key = reccord.$key;
});
this.deployAdminData = JSON.parse(JSON.stringify(rec));
});
if(this.deployAdminData!=null && Object.keys(this.deployAdminData).length>0){
return "true";
}
return "false";
}
Here is where the isDeploymentAdminAvailable method is called to determine the isAvailable status:
deploymentOnClick($event, deployment){
this.isAvailable = 'None';
this.selectedDeploy = deployment;
this.isAvailable = this.isDeploymentAdminAvailable(deployment);
}