“チェック後に式が変更されました”の修正

修正 “Expression has changed after it was checked. Previous value: 'ngIf: true'. Current value: 'ngIf: false'.”#

エラーメッセージ#

Expression has changed after it was checked. Previous value: 'ngIf: true'. Current value: 'ngIf: false'.

概要#

このエラーメッセージは通常の使用にはほとんど影響しませんが、Console にエラーが表示されるのは気分が悪いです（
そのため、この問題を解決したいと思います。

解決を始める#

まず、このエラーメッセージから、Angular が値をチェックする際に、元の値と新しい値が一致しないことが原因であることがわかります。
Angular が自分で更新できないので、私たちが更新を手伝う必要があります。コードは以下の通りです：

    import { AfterContentChecked } from '@angular/core';
    // ... 他のコード
    @Component({
        selector: 'app-test',
        templateUrl: './test.component.html'
    })
    export class TestComponent implements AfterContentChecked {
        // ... 他のコード
        public constructor(
                private titleService: Title,
                public layout: LayoutService,
                // 更新チェッカー
                private cdr: ChangeDetectorRef,
        ) {
            // ... 他のコード
        }
        
        // チェックの後に、もう一度更新チェックをトリガーします
        ngAfterContentChecked(): void {
            this.cdr.detectChanges();
        }
}

これで、この問題は解決しました。