Защо условното div не работи в ъглово - ъглова, машинописна, firebase

Имам три условни Разделение в една страница и се опитва да покаже всяко от тях на определено условие.

<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>

в .ts страница, настроих е на разположение при различно състояние и искате да покажете съответното Разделение, Но това не работи.

Искам да направя съответното Разделение, Ето кода, който поставям е на разположение

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";

}

И функцията, откъдето наричам това isDeploymentAdminAvailable методът е

deploymentOnClick($event, deployment){

this.isAvailable = "None";

this.selectedDeploy = deployment;

this.isAvailable = this.isDeploymentAdminAvailable(deployment);
}

Отговори:

1 за отговор № 1

Ти се връщаш "true" и "false" тези са струни, които и двете оценяват вярно. Премахнете котировките, така че да са true и false и задайте типа isAvailable да се boolean, и нека compare * ngIf isAvailable или !isAvailble

Честно казано има много грешки с вашия код. Javascript е единичен резба, трябва да имате декларации за връщане да бъдат определени. т.е. if трябва да бъде последван от else, Виждам само две условни разделяния ... Използване true false или "Няма" изобщо не е добра идея. Имената true и false ако имате повече от две опции, трябва да използвате други термини.

Също така това е машина. Трябва да въведете параметрите си. Всички те са от типа any.

Също така преминавате в инсталацията isDeploymentAdminAvailable и не го използвайте навсякъде ...

Също така в javascript трябва да използвате === и !== операторите, когато това е възможно.

Моля, опишете поведението, което се случва. Не правиш ли диви? Моля, променете isAvailable на булев и ми кажи какво става. употреба console.log в if изявление и отвън и проверете конзолата, за да видите кое условие се задоволява и дали това е това, което очаквате. Когато направите тези промени докладвате и аз ще ви помогна.

Както @yurzui заяви, проблемът с вашия код епочти сигурно, че не използвате асинхронен код. Вие чакате firebase да върне стойност и след това незабавно да провери тази стойност, преди да се върне. Предполагам, че кодът винаги се връща "false" от this.deployAdminData винаги ще бъде null тъй като вие не чакате отговор от firebase и просто тичам направо през него.

За да го коригираме, един подход би бил да се отдели if се определя в отделна функция и се нарича тази функция в края на subscribe.

this.authService.fnGetDataUsingCustomQuery(FirebaseDb.firebasedeploymentAdminTable, customQuery).subscribe(
(rec: any) => {
rec.forEach((reccord: any) => {
reccord.key = reccord.$key;
});
this.deployAdminData = JSON.parse(JSON.stringify(rec));
this.isAvailable = this.yourFunctionName(deployAdminData);
});
}

yourFunctionName(deployAdminData: any) {
if(deployAdminData !== null &&
Object.keys(deployAdminData).length > 0) {
return true;
} else { return false; }
}

редактирайте също така:

deploymentOnClick($event, deployment){
//this.isAvailable = "None";
this.selectedDeploy = deployment;
this.isDeploymentAdminAvailable(deployment);
}

След това можете да използвате *ngIf="isAvailable", Забележете, че зададох deployAdminData да въведете any в параметъра. Това не е най-добрата практика и трябва да замените any с типа данни.

---

0 за отговор № 2

Основната причина защо isAvailable не е контролът на вашата дива видимост вече е била дадена - стойността трябва да бъде определена в абонамента.

Но е ясно, че заявлението прави не работят, когато типът на този флаг е променен на Boolean.

Струва ми се, логиката на приложението е, че преди данните да бъдат извлечени, вие не показват нито на дивата (isAvailable === "None"), след което след като донесете показвате едно или друго разделяне въз основа на връщаната стойност.

Рефакторинг според най-добрата ъглова практика

Може да искате да натиснете кода в isDeploymentAdminAvailable в authService обслужване.

По този начин

• цялата логика, свързана с донасянето, е на едно място
• вашето тестване ще стане по-гладко
• можете да премахнете зависимостта на Firebase от компонента
• излагайте данните и isAvailable собственост като наблюдатели.

Наблюдавани конвенции

Това е обичайната практика да се прилага $ до края на променливите, които се наблюдават, за да стане очевидно, че те се нуждаят async тръба в шаблона или subscribe в ts код.

Защо се наблюдават променливи?

Приложението ще изведе страницата много преди Firebase извличането да върне стойност, така че чрез използване на наблюдаеми променливи и async pipe в шаблона ви, изгледът ще се актуализира автоматично, когато извличането в крайна сметка се върне.

Също така, Firebase може да прокара нови стойности в приложението ви, когато базата данни се промени, така че с видими свойства гледката отговаря на тези промени, без да е необходимо да се обновява изрично.

Единственото нещо, което не ми е ясно, е връзката между тях NewDeployAdmin и this.deployAdminData.
Може да се наложи да добавите a subscribe() или async тръба в зависимост от това, как са свързани тези два елемента.

authService.ts

@Injectable()
export class AuthService {

public deployAdminData$ = new BehaviorSubject({});
public isAvailable$ = new BehaviorSubject("None");  // initial value set to "None"

private fnGetDataUsingCustomQuery(...) {
...
}

public isDeploymentAdminAvailable(key) {
let customQuery = {
equalTo: key
}
this.fnGetDataUsingCustomQuery(FirebaseDb.firebasedeploymentAdminTable, customQuery)
.subscribe(rec => {
rec.forEach(reccord => reccord.key = reccord.$key );
const data = JSON.parse(JSON.stringify(rec));  // this may not be needed
this.deployAdminData$.next(data);
this.isAvailable$.next(
data && Object.keys(data).length ? "true" : "false";
)
});
}

myComponent.html

<div *ngIf="(isAvailable$ | async)=="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 at least 6 characters"
[(ngModel)]="NewDeployAdmin.password">
</div>
<button type="submit" class="btn btn-primary
(click)="fnCreateDeployAdmin()">Submit</button>
</form>
</div>

<div *ngIf="(isAvailable$ | async)=="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>

myComponent.ts

// Set up observable pipeline that responds to changes in the database.
private isAvailable$ = this.authService.isAvailable$;
private this.deployAdminData$ = this.authService.this.deployAdminData$;

isDeploymentAdminAvailable(deployment) {
this.authService.isDeploymentAdminAvailable(this.selectedDeploy.key)
}

---

-1 за отговор № 3

Вместо да сравнявате и използвате израз в шаблона, директно преминете стойността е на разположение към шаблона.

<div *ngIf="isAvailable">
...
</div>
<div *ngIf="!isAvailable">
...
</div>

Надявам се, че това може да помогне.

---