Angular has been modified after being verified. The earlier value was 'null'

core.js:6162 ERROR Error: NG0100:
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
Previous value: 'null'. Current value: '{

When attempting to retrieve the 

{{dispositionDetails?.metricsData | json}}
, I encountered the mentioned error.

Any suggestions on how to resolve this issue? The dispositionDetails is sourced from the tag #dispositionDetails as indicated in the code below. Any insights would be appreciated.

#ts code

export class DealDetailsComponent implements OnInit {
  @ViewChild('pmrDetails') pmrDetails: any;
  @ViewChild('dispositionDetails') dispositionDetails: any;

#html code

<div class="page-content-details" *ngIf="urlData">
  <div class="page-content-details-left">
    <div>  
      <app-deal-pmr #pmrDetails
        *ngIf="urlData.dealType === 'Portfolio Management Restructure'"
        (gotoManageDealsEvent)="goBack()"
        (setIsInEditMode)="setIsInEditMode($event)"
        [dealData]="dealDetails"
        [transactionData]="urlData.transaction"
        [leaseDetails]="leaseDetails">
      </app-deal-pmr>    
      <app-deal-idle-disposition #dispositionDetails
        *ngIf="urlData.dealType === 'Idle Disposition'"
        (gotoManageDealsEvent)="goBack()"
        (setIsInEditMode)="setIsInEditMode($event)"
        [dealData]="dealDetails"
        [transactionData]="urlData.transaction"
        [leaseDetails]="leaseDetails">
      </app-deal-idle-disposition>
      <app-deal-partnership
        *ngIf="urlData.dealType === 'Partnership'"
        (gotoManageDealsEvent)="goBack()"
        [dealData]="dealDetails"
        [transactionData]="urlData.transaction"
        [leaseDetails]="leaseDetails">
      </app-deal-partnership>      
    </div>
    <app-page-section-cards [header]="pageSectionsOptions.checkList">
            <div sectionContent>        
      </div>
    </app-page-section-cards>


    {{dispositionDetails?.metricsData | json}}

    <app-page-section-cards [header]="pageSectionsOptions.metrics">
            <div sectionContent>             
        <app-deal-metrics 
          *ngIf="!isInEditMode"                
          [isInEditMode]="isInEditMode" 
          [dealData]="dealDetails"          
          [dealType]="urlData.dealType">
        </app-deal-metrics>   
        <app-deal-metrics    
          *ngIf="isInEditMode"       
          [isInEditMode]="isInEditMode" 
          [editData]="pmrDetails?.metricsData || dispositionDetails?.metricsData"
          [dealType]="urlData.dealType">
        </app-deal-metrics>             
      </div>
    </app-page-section-cards>   
  </div>

https://i.sstatic.net/YCS6O.png

https://i.sstatic.net/XaK6a.png

javascriptangulartypescript

Answer №1

Encountering a problem with angular lifecycle hooks? Explore more about it at https://angular.io/guide/lifecycle-hooks This particular error seems to occur only during development, based on my research.

One potential solution could be initializing default values for pmrDetails and dispositionDetails within the ngOnInit / constructor functions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The capability to scroll within a stationary container

Whenever you click a button, a div slides out from the left by 100%. This div contains the menu for my website. The problem I'm encountering is that on smaller browser sizes, some of the links are hidden because they get covered up. The #slidingMenu ...

javascriptjqueryhtmlcss

Component fails to navigate to the page of another component

Hello there. I am facing an issue where the button with routelink in the RegistrationComponent is not routing to the page of LogInComponent and I cannot figure out why. Angular is not throwing any errors. Here is the RouteComponent along with its view: im ...

typescriptangular

Error: Attempting to access 'toString' property on an undefined value - redis

const updateLeaderboards = async () => { try { const users = await User.findAll(); const leaderboardData = []; users.forEach((user) => { // Add user data to the leaderboardData array in the required format leaderboardData.p ...

javascriptnode.jsexpressredis

Step-by-step guide on integrating a specific location into Google Maps using React.js

I'm in the process of revamping my website using Reactjs. I want to incorporate a specific Google location with reviews on the map, similar to how it appears on this example (My current website is built on Wordpress). As of now, all I've been ab ...

javascriptreactjsgoogle-mapsgoogle-maps-markers

Ways to confirm non-null values and bypass the row if it is

I have been attempting to compare 2 dates in order to appropriately display data in a table. I have tried the following approach: ${this.dateToCompare.getTime()} > ${row.CreateDate.getTime()} However, there is an issue where CreateDate has a null value ...

javascriptangularjstypescript

Learn how to utilize React lazy effectively in components that utilize Redux compose without any similarities to type 'IntrinsicAttributes'

Here is the structure of a component that is exported with compose from redux. This component is called TestInspector.tsx export interface TestInspectorProps { closeInspector: () => void; onExpand: () => void; isFullScreen: boolean; selected ...

reactjstypescriptlazy-loadingreact-props

Encountering a Next.js Strapi error. TypeError: Fetch request unsuccessful

An error occurred during module build: UnhandledSchemeError: The plugin does not support reading from "node:assert" URIs (Unhandled scheme). Webpack natively supports "data:" and "file:" URIs. You might require an extra plugin to handle "node:" URIs. ...

javascriptnext.jsstrapi

Tips for automating the activation of intents at specific scheduled times in Dialogflow

I'm attempting to automatically trigger intents in Dialogflow to obtain the user's contact details at a scheduled time. Is it possible to achieve this using JavaScript? If so, could you please provide the code? ...

javascriptphpnode.jsdialogflow-eschatbot

Issues with running Angular 2-4 SETUP on Windows operating system

I recently started working with Angular 2/4 and everything was running smoothly until I followed the instructions on https://github.com/angular/angular-cli. I have Angular 2-4 installed on my machine, but after a recent Windows update, I encountered issues ...

angularangular-cli

What is the best way to incorporate a @types module into a TypeScript file that is not already a module?

Setting the Stage: In the process of shifting a hefty ~3,000 line inline <script> from a web-page to a TypeScript file (PageScripts.ts) to be utilized by the page through <script src="PageScripts.js" defer></script>. This script entails ...

javascripttypescript

Issue with JQuery Event Listener on Canvas Subelement not functioning

I encountered an issue while trying to implement a custom crop rectangle on a canvas using JavaScript. I created a function that, when called, should add a child node to the existing canvas and use JQuery listeners to draw the rectangle. However, although ...

javascriptjqueryhtmlcanvas

Order JSON object based on designated Array

I'm looking to organize a JSON object in a specific order, Here is the current object structure: { "you": 100, "me": 75, "foo": 116, "bar": 15 } I would like to rearrange this object in the following sequence ['me', 'foo', &apos ...

javascriptarraysangularjsjsonsorting

Encountering Error with NodeJS Typescript: Issue with loading ES Module when running sls offline command

I have come up with a unique solution using NodeJS, Typescript, and Serverless framework to build AWS Lambdas. To debug it locally in VS Code, I use the serverless-offline library/plugin. You can find my project on GitHub here However, when I run the comm ...

javascriptnode.jstypescriptecmascript-6serverless-framework

Troubleshooting image loading issues when updating the base URL in an Angular JS project

I am trying to update the base URL for my application. Currently, when I load the application, the URL shows up as http://localhost:4200/#/, but I want it to be http://localhost:4200/carrom/ instead. To accomplish this, I modified the base URL and now th ...

angularangularjstypescriptangularjs-routing

Access a SQL database to retrieve a data value and seamlessly integrate it into an HTML document with the help of node

I am new to web development and currently facing a challenge in displaying SQL content on an HTML page. My stack includes Node.js, Express, and SQLite3. I have a folder named public containing HTML, CSS, and JS files. The objective is to retrieve a varia ...

javascripthtmlnode.jsexpress

Introducing a pause in the function while rendering objects

After inserting setInterval into the code, it is causing all lasers to be delayed by one second. I am looking to have them fired in this order: - initially fire laser1 and laser2. - then take a 1-second break before firing another set of lasers, a ...

javascripthtmlloops

Looking for a way to automatically update your JavaScript code on your Minecraft (Bukkit)

One of my clients has requested a website design that includes a player display for each server, updating every five seconds. I'm not sure where to start with this task. Below is an example for reference. Any guidance on how to achieve this would be g ...

javascriptphpajaxminecraftbukkit

Utilizing API calls within a loop using AngularJS

I need to execute a series of APIs in a loop, but I want the second loop to start only after receiving the result from the last API call in the first loop. How can I achieve this? for(var i=0; i<array.length; i++ ) service.getfunction(array[i]).t ...

javascriptangularjsapifor-looppromise

Angular does not seem to be triggering $watch for changes in arrays

Trying to activate a $watch function after a delay in Angular: Controller Information .controller('MyCtrl', ['$scope', function ($scope) { $scope.chickens = ["Jim", "Joe", "Fred"]; $scope.chickens.push("Steve"); setTimeou ...

javascriptangularjs

Issue with Typescript: When inside a non-arrow class method, the keyword "this" is undefined

Many questions have addressed the topic of "this" in both JS and TS, but I have not been able to find a solution to my specific problem. It seems like I might be missing something fundamental, and it's difficult to search for an answer amidst the sea ...

javascripttypescriptthis