Чому умовна div не працює в кутових - кутових, машинописних, firebase

У мене є три умовно div на сторінці і намагаючись показати кожну діл на певному умовні.

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

В .ц на сторінці, я встановив доступний на різних умовах і хочете відобразити відповідний div. Але це не працює.

Я хочу зробити відповідний div. Ось код, де я встановлюю доступний

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. і дайте порівняти * ngIf isAvailable або !isAvailble

Чесно кажучи, з вашим кодом є багато помилок. Javascript є однопоточним, і ви повинні бути визначеними. тобто if слід дотримуватися else. Я бачу лише дві умовні divs ... Використовуючи true false або Ніхто взагалі не є гарною ідеєю. Імена true і false майте на увазі бінарний зв'язок, якщо ви хочете використовувати більше двох варіантів використання інших термінів.

Також це машинопис. Вам потрібно ввести свої параметри. Вони всі типу any.

Також ви передаєте розгортання в isDeploymentAdminAvailable і не використовуйте його де завгодно ...

Також у JavaScript ви повинні використовувати === і !== оператори, де це можливо.

Опишіть поведінку. Ви не надаєте ні div? Будь ласка, змініть 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 isn''t контролювати ваш видимості div вже дано - значення повинно бути встановлено в рамках підписатися.

Але зрозуміло, що додаток робить ні працювати, коли тип цього прапора змінюється на булево.

Мені здається, що логіка додатка полягає в тому, що перш, ніж дані будуть витягнуті, ви не покажи ні від div's (isAvailable === "None"), то після завантаження ви показуєте одну чи іншу діб на основі повернутого значення.

Рефакторинг за найкращою практикою укусу

Можливо, ви бажаєте натиснути цей код на isDeploymentAdminAvailable в authService сервіс

Цей шлях

• вся логіка, пов'язана з завантаженням, знаходиться в одному місці
• ваше тестування буде гладким
• ви можете видалити залежність Firebase від компонента
• виставити дані і isAvailable власність як Обсервативні.

Наблюдаемые конвенції

Це звичайна практика додавання $ до кінця змінних, які можна спостерігати, щоб очевидно, що вони потрібні async труба в шаблоні, або subscribe в коді ts

Чому спостережувані змінні?

Додаток відображатиме сторінку задовго до того, як Firebase fetch поверне значення, тому, використовуючи помітні змінні та async труба у вашому шаблоні, режим перегляду буде автоматично оновлюватися, коли повернення буде в кінці кінців.

Крім того, Firebase може натискати нові значення у ваш додаток, коли змінюється база даних, тому з видимими властивостями вигляд відповідає на ці зміни без явного оновлення.

Єдине, що мені не зрозуміло, - це відносини між ними NewDeployAdmin і this.deployAdminData.
Вам може знадобитися додати 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>

Я сподіваюсь, що це може допомогти.

---