логическое значение не работает должным образом сразу после вызова reattach () Change Detection; шансы

Question

Я пытаюсь обновить интерполяцию логических значений после вызова " this.cdr.reattach (); " Как вы можете видеть из моего примера кода (Stackblitz), логическое значение «Обновлять должным образом внутри» независимо от отсоединенного / повторно присоединенного состояния и правильно печатать его на вкладке «Консоль».

Однако привязка интерполяции с вызовом reattach () никогда не работает должным образом только с логическим значением при нажатии кнопки (<button (click)="toggleDetach()">)! {{isDetached? 'Detached': 'Attached'}}

Интерполяция логического значения на кнопке должна была измениться на экране сразу после reattach () в зависимости от значения isDetached (false / true);

Я не должен был ставить "@Input" на isDetached, но я хотел убедиться в обнаружении изменений.

Я даже вызвал "this.cdr.detectChanges ();" но не работает! Я надеюсь, что это не ошибка!

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

Я сделал пример проекта на Stackblitz.

Пожалуйста, кто-нибудь покажет мне, как решить эту проблему.

Это пример кода.

https://stackblitz.com/edit/angular-mh3mqu?file=src%2Fapp%2Fmyzone.component.ts

import { Component, OnInit, Input, ChangeDetectorRef, SimpleChanges } from '@angular/core';

@Component({
    selector: 'my-zone2',
    template: `
    <button (click)="onClick()">Increase</button>
    <button (click)="changeToggle()">ChangeToggle</button>
    <my-comp [value]="myValue" [isDetached]="mytoggle" [canDetach]="mydetach"></my-comp>
  `,
    styles: []
})
export class Zone2Component implements OnInit {
    myValue = 0;
    mytoggle = false;
    mydetach = false;

    constructor() {}

    ngOnInit() {}

    onClick() {
        this.myValue++;
    }

    changeToggle() {
        if (this.mytoggle) {
            console.log('After changeToggle: ', this.mytoggle);
            this.mytoggle = false;
            this.mydetach = false;
            console.log('After changeToggle: ', this.mytoggle);
        } else {
            console.log('Before changeToggle: ', this.mytoggle);
            this.mytoggle = true;
            this.mydetach = true;
            console.log('After changeToggle: ', this.mytoggle);
        }
    }
}

@Component({
    selector: 'my-comp',
    styles: [ '' ],
    template: `
    <div>
      <button (click)="DoNothing()">{{doNothing}}</button>
      <button (click)="toggleDetach()">
      {{isDetached ? 'Detached' : ' Attached'}}
      {{canDetach ? 'canAttach' : ' canDatach'}}
      / {{changedValue}}
      </button>
      <button (click)="justToggle()">
      justToggle:
      {{justToggleValue}} //
      {{isDetached ? 'Detached' : ' Attached'}}
      </button>
      <div>{{value}}</div>
      <div>isDetached? {{isDetached}}</div>
      <input #box (keyup.enter)="onEnter(box.value)">
      <p>{{inputValue}}</p>
    </div>
  `
})
export class My2Component {
    @Input() value: number;
    @Input() isDetached = false;
    doNothing: string = 'noNothing';
    @Input() canDetach = false;
    //canDetach = false;
  changedValue: number = 0;
  justToggleValue: boolean = false;

    constructor(private cdr: ChangeDetectorRef) {}

    DoNothing() {
        console.log('DoNothing!');
        if (this.isDetached) {
            this.doNothing = 'doNothing';
        } else {
            this.doNothing = 'canDoSomething';
        }
    }
    inputValue = '';
    onEnter(typedValue: string) {
        console.log('onEnter-inputValue: ', typedValue);
        this.inputValue = typedValue;
    }

    justToggle() {
        if (this.isDetached) {
      this.justToggleValue = false;
            this.isDetached = false;
        } else {
      this.justToggleValue = true;
            this.isDetached = true;
        }
    }

    toggleDetach() {
        console.log('toggleDetach() !!!');

        if (this.isDetached) {
            console.log(' before ---> ', this.canDetach);
            console.log(' before ---> ', this.isDetached);
            this.isDetached = false;
      this.canDetach = false;
      this.justToggleValue = false;
            ++this.changedValue;
            this.cdr.reattach();

            this.cdr.markForCheck();
            this.cdr.detectChanges();

            console.log(' after ---> ', this.isDetached);
            console.log(' after ---> ', this.canDetach);
        } else {
            console.log(' before ---> ', this.canDetach);
            console.log(' before ---> ', this.isDetached);
            this.isDetached = true;
      this.canDetach = true;
      this.justToggleValue = true;
            ++this.changedValue;
            this.cdr.detach();
            console.log(' after ---> ', this.isDetached);
            console.log(' after ---> ', this.canDetach);
        }
    }