nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

Error with a combination of adf-document-list & adf-upload-button

d_m

Hi,

I get an error when i use the adf-document-list and adf-upload-button in a specific way in ADF 2.4.

<adf-toolbar>
  <adf-toolbar-title>
    <adf-breadcrumb
      class="files-breadcrumb"
      root="Personal Files"
      [target]="documentList"
      [folderNode]="documentList.folderNode">
    </adf-breadcrumb>
  </adf-toolbar-title>

  <div class="adf-toolbar--spacer"></div>

  <adf-upload-button
    [rootFolderId]="documentList.currentFolderId"
    [adf-node-permission]="'create'"
    (success)="uploadSuccess($event)">
  </adf-upload-button>

</adf-toolbar>

<adf-document-list
  #documentList
  [currentFolderId]="folderId"
  (preview)="showPreview($event)">
</adf-document-list>

<adf-file-uploading-dialog></adf-file-uploading-dialog>

this is a standard use of the uploadbutton and document list, with a variable folderId.

When I change the folderId variable:

this.folderId = sitecontainerEntry.entry.id;

i get following error:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null'. Current value: '37a263eb-2f39-4e91-8d56-abb7add18b63'.
    at viewDebugError (core.js:9801)
    at expressionChangedAfterItHasBeenCheckedError (core.js:9779)
    at checkBindingNoChanges (core.js:9948)
    at checkNoChangesNodeInline (core.js:14002)
    at checkNoChangesNode (core.js:13976)
    at debugCheckNoChangesNode (core.js:14805)
    at debugCheckDirectivesFn (core.js:14707)
    at Object.eval [as updateDirectives] (SamenwerkingssiteComponent.html:13)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14689)
    at checkNoChangesView (core.js:13814)

It doesn't matter what my initial value was (in this case null, but it can be -root- or something else), i get the same error.

The upload button still works fine after getting the error, but it's just not 'clean'.

Best regards,

David.

Find more posts tagged with

Application Development Framework

Comments

eugenio_romano

Hi David I suggest you to a fast research on the internet and search for the cause of why this thing can happen in your Angular app: ExpressionChangedAfterItHasBeenCheckedError is a common error.

Angular is checking for the unidirectional data flow from top to bottom. That means that the lower component in the hierarchy should not be allowed to update properties of a parent. Most of the time this error is not reflecting a real issue for real implementation but is difficult to get where it comes from without the rest of your app.Maybe you can give a look to the :

GitHub - Alfresco/alfresco-content-app: Alfresco Example Content Application

https://github.com/Alfresco/alfresco-ng2-components/tree/master/demo-shell

d_m

Hi Eugenio,

I have a simple way to recreate this error in a new app:

generate a new Alfresco ADF app, set up the proxy
generate a new component with the name: test
set up a route to the new component
app.routes.ts
{
        path: 'test',
        component: TestComponent,
   }

paste the following code in the component:

test.component.ts

import { Component, OnInit } from '@angular/core';
import {LogService, NodesApiService} from '@alfresco/adf-core';

@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
folderId: string = null;

constructor(
private nodesService: NodesApiService,
private logService: LogService,
) {
}

ngOnInit() {
    this.nodesService.getNode('-my-').subscribe(
      (node) => {
        this.folderId = node.id;
      },
      (error) => {
        this.logService.error(error);
      }
     );
}

}

Paste the following code in the component template:

test.component.html

<adf-toolbar>
<adf-upload-button
[rootFolderId]="documentList.currentFolderId"
[adf-node-permission]="'create'">
</adf-upload-button>

</adf-toolbar>

<adf-document-list
#documentList
[currentFolderId]="folderId">
</adf-document-list>

Best regards,

David.

dvuika

Good article to get more details: https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-…

Please note that you won't see this error in production mode. So while it is definitely good to eliminate it over time for "clean" results, it should not block you from working on other features.