Скрыть элемент / компонент с ngIf, если не работает - PullRequest
Новая
       7

Скрыть элемент / компонент с ngIf, если не работает

0 голосов
/ 10 марта 2020

Я хочу добавить / удалить сообщение об ошибке div на основе массива - если длина не равна 0, добавить div, иначе удалить его.

Но это не работает - после удаления div - оно никогда не добавляется.

Почему не добавляется?

Мои ts: 

errorMessages: string[] = [];
company: Company = null;

constructor(private store: Store<fromApp.AppState>) { } // NgRX store

ngOnInit() {
    this.store.select('position')
      .subscribe(currState => {
          this.company = {_id: '1', name: '1'};
          if (!this.company.email) {
            console.log('11111') // printed before and after pressing the close button
            this.errorMessages = ['There was an error fetching the company'];
          }

          // printed before and after pressing the close button

          // printing 'Array [ "There was an error fetching the company" ] 1'. 
          // and after pressing the close button of the message component printing 
          // 'Array [ "There was an error fetching the company" ] 1'
          console.log(this.errorMessages, this.errorMessages.length) 


      });
  }

onClose() {
  this.store.dispatch(new PositionActions.ClearError());
  this.errorMessages = [];
}

html: 

<app-message-box *ngIf="errorMessages.length" [messages]="errorMessages" (closeMessages)="onClose()"></app-message-box>
{{ errorMessages.length }} // printing '1'. and after pressing the close button of the message component printing '0'

Компонент сообщения ts: 

  @Input() messages: string[];
  @Output() closeMessages = new EventEmitter<void>();

  onClose() {
    this.closeMessages.emit();
  }

Компонент сообщения html: 

<div class="message-box">
  <button class="close-button glyphicon glyphicon-remove" (click)="onClose()">
  </button>
  <ul>
    <li *ngFor="let message of messages">
      {{ message }}
    </li>
  </ul>
</div>
...