У меня есть кнопка, которая при каждом нажатии должна отображать или скрывать контент

Html:

            <button (click)="showHide()">
                    {{ content$ ? 'Hide'  : 'show'  }}
            </button>
            <div *ngIf="content$" >
             CONTENT
            </div>

Ts:

readonly content$ = new BehaviorSubject<boolean>(false);
showHide(): void {
    this.content$.next(true);
}

И этот код не дает никаких ошибок, но он всегда отображает контент, и я не могу его скрыть, какая-либо помощь?

-1
user17516027 26 Ноя 2021 в 17:22

2 ответа

Лучший ответ

Привет и добро пожаловать в Stackoverflow!

Вы правильно установили новое значение в BehaviorSubject, и с помощью: *ngIf="content$" вы просто проверяете, существует ли BehaviorSubject.

Чтобы получить контент, вам необходимо:

<div *ngIf="content$ | async; let content">
  CONTENT
</div>

С let content вы можете получить доступ к значению вашего объекта, если вам нужно;)

Дополнительную информацию можно получить в документе AsyncPipe

0
Shifenis 26 Ноя 2021 в 17:30
Это помогло, но теперь я могу показывать контент, но скрывать текущую работу, как только я показываю контент, я не могу его скрыть -
 – 
ttyttt
26 Ноя 2021 в 17:33
Потому что ваш метод showHide просто показывает это (this.content$.next(true)). Вы должны настроить свою логику, чтобы переключаться с истины на ложь, примерно так: this.content$.next(!this.content$.getValue())
 – 
Shifenis
26 Ноя 2021 в 17:35
Спасибо!!! но теперь мой текст внутри кнопки всегда один и тот же, он не реагирует на средство смены содержимого $
 – 
ttyttt
26 Ноя 2021 в 17:48
Вы должны проверить значение BehaviourSubject и на его основе изменить метку. Очень похоже на div содержимого
 – 
Shifenis
26 Ноя 2021 в 17:55
Но у меня есть два условия для текста внутри кнопки
 – 
ttyttt
26 Ноя 2021 в 17:57

Вам нужно использовать асинхронный канал для чтения наблюдаемого значения.

<div *ngIf="content$ | async" >
 CONTENT
</div>

https://angular.io/api/common/AsyncPipe

0
Vítor França 26 Ноя 2021 в 17:27
Это помогло, но теперь я могу показать контент, но скрыть предыдущую работу, как только я показываю контент, я не могу его скрыть
 – 
ttyttt
26 Ноя 2021 в 17:33
Ваш метод, показывающий или скрывающий контент, всегда меняет свойство behaviorSubject на true, вам нужно изменить значение на противоположное значение, когда вы нажимаете эту кнопку
 – 
Vítor França
26 Ноя 2021 в 17:37