Машинопись, если условие с логическим значением не работает должным образом

Question

Происходит что-то странное, и я действительно не знаю, почему.
В моем угловом проекте есть компонент, который имеет дочерний компонент. HTML-код родительского компонента выглядит следующим образом:

<child-component [isEditable]="isEditable"></child-component>

В родительском компоненте ts я объявил свойство "isEditable":

isEditable: boolean = true;

, а затем в ngOnInit:

this.isEditable = false;

Тогда в дочернем компоненте у меня есть соответствующее свойство ввода со значением по умолчанию:

@Input() isEditable: boolean = true;

Когда это значение из родительского изменяется на false, мне нужно реализовать некоторую логику. Проблема заключается в том, что как в ngOnInit, так и в ngOnChanges дочернего компонента, если я выполняю

if(!this.isEditable) {
   console.log("DO SOMETHING");
} 

, он не входит в условие. Поэтому я подумал о некоторой «задержке» получения нового значения, добавил console.log перед условием if, но оказалось, что это правильно false .
В итоге я сделал это в методе ngOnInit:

console.log("BEFORE IF", this.isEditable);
if(this.isEditable){
   console.log("ENTERED IN TRUE", this.isEditable);
}

и это вывод:

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

Answer 1

Использовать установщик на входе

  @Input() set isEditable(isEditable: boolean) {
    console.log('isEditable', isEditable);
  }

этот код будет запускаться каждый раз, когда isEditable будет меняться от родительского.

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

Answer 2

ngOnChanges предлагает параметр, который вы можете использовать, типа SimpleChanges.

ngOnChanges(changes: SimpleChanges) {
  console.log(changes.isEditable.currentValue);
}

Попробуйте использовать эту переменную вместо ввода, посмотрите, что произойдет.