Я создал контактную форму и обрабатываю, если запрос успешен или содержит ошибки.

В BehaviourSubject я храню true или false.

  • успех = правда
  • ошибки = ложь

Теперь я бы отобразил правильное предупреждение после отправки формы.

Когда значение имеет: 0 - предупреждения должны быть отключены true - отображать предупреждение об успешном завершении false - отображать предупреждение об ошибке

С какими условиями я могу этого добиться? Потому что в настоящее время успех отображается с самого начала ... и после нажатия кнопки X ничего не меняется.

Моя площадка:

isValid$ = new BehaviorSubject<any>(null);
    ngOnInit(): void {
        this.isValid$.subscribe();
    }

   closeAlert() : void {
    this.isValid$.next(null);
}
<!-- ALERT -->
<div *ngIf="isValid$" class="alert alert-success alert-dismissible fade show mt-5" role="alert">
    <!-- Success -->
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="closeAlert()"></button>
</div>

<div *ngIf="!isValid$" class="alert alert-danger alert-dismissible fade show mt-5" role="alert">
    <!-- Error -->
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="closeAlert()"></button>
</div>
0
user12465572 17 Авг 2021 в 15:46

2 ответа

Лучший ответ

Вы можете удалить ngOnInit и вместо этого использовать асинхронный канал для подписки на наблюдаемый объект следующим образом:

<!-- ALERT -->
<div *ngIf="isValid$ | async" class="alert alert-success alert-dismissible fade show mt-5" role="alert">
    <!-- Success -->
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="closeAlert()"></button>
</div>

<div *ngIf="!isValid$ | async" class="alert alert-danger alert-dismissible fade show mt-5" role="alert">
    <!-- Error -->
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="closeAlert()"></button>
</div>
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;

  isValid$: Observable<boolean>;

  ngOnInit(): void {
    this.isValid$ = of(true);
  }
}

В вашем случае наблюдаемый isValid $, конечно, заполняется по-другому, но реагировать на него одинаково.

Вы также можете проверить и поэкспериментировать со stackblitz здесь: https://stackblitz.com/edit/angular-ivy-wvx9mt?file=src%2Fapp%2Fapp.component.ts

1
gerstams 17 Авг 2021 в 13:52

BehaviourSubject - это тема. Здесь нам нужно использовать это как наблюдаемое. и эта наблюдаемая может быть подписчиком в шаблоне с помощью async pipe.

{
   isValid = new BehaviorSubject<any>(null);

   closeAlert() : void {
      this.isValid.next(null);
   }

   get isValid$() {
      this.isValid.asObservable();
   }
}






     <!-- ALERT -->
<ng-container *ngIf="(isValid$ | async) !== null">
    <div [ngClass]="{ 'alert-success': (isValid$ | async) === true, 'alert-danger' : (isValid$ | async) === false }" class="alert alert-dismissible fade show mt-5" role="alert">
      {{ (isValid$ | async) ? 'Success' | 'Error' }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="closeAlert()"></button>
    </div>
</ng-container>
1
Sijil Sasidharan 17 Авг 2021 в 13:41