Флаг ngIf не обновляет элемент span при изменении значения в ngOnInit - PullRequest
0 голосов
/ 29 сентября 2019

Отображается флеш-сообщение, если пользователь успешно создал сообщение.Я создаю значение после создания поста и захвата значения в ngOnInit перенаправленного компонента, чтобы изменить флаг, который я использую для отображения флэш-сообщения.

У меня также есть другое флэш-сообщение в том же компоненте, которое будет отображаться после успешного входа пользователя и работает нормально.

ngOnInit() {

    this.userSub=this.userService.loginStatusChanged.subscribe(
      (data:{loginFlag:boolean, userId:string, userName:string})=>{

        this.user = data.userName;
        if(data.loginFlag){

          if(this.previousRouteService.getPreviousUrl()=='/log-in'){
            this.loginFlashMessageFlag=true;
            setTimeout(()=>{
              this.loginFlashMessageFlag=false;
            },5000)
          }
        }

        this.kavithaiService.kavithaiStatusChanged.subscribe(
          (data:any)=>{
            console.log(data);
            this.createPostFlashMessageFlag = true;
            setTimeout(()=>{
              this.createPostFlashMessageFlag=false;
            },5000)

          }
        )

      }
    )
  }

HTML:

<span id="loginFlashMessage"  @flashMessageAnimation *ngIf="loginFlashMessageFlag">வணக்கம், {{user}} !</span>

<span id="createPostFlashMessage"  @flashMessageAnimation *ngIf="createPostFlashMessageFlag" >Flash Message</span>

console.log (data) внутри подписки на сервис kavithai отображается правильно, но dom не меняется.Тем не менее, после входа в систему флеш-сообщение отображается правильно.

Может кто-нибудь помочь мне с этим?

1 Ответ

0 голосов
/ 29 сентября 2019

Вам необходимо добавить обнаружение изменений.

Добавить

private changeDetect: ChangeDetectorRef

в конструктор.

Добавьте

this.changeDetect.detectChanges();

после обновления флагов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...