Spfx Angular Elements / @pnp/pnpjs *ngFor not working

Spfx webpart with Angular Elements / @pnp/pnpjs not working when you try to render data dynamically. I have tested it with static array: topics: string[] = ['C','C#'] html code: `

<li *ngFor=“let topic of topics”>{{topic}}

`

And with pnp: pnp.sp.web.lists.getByTitle(this.listName).items.get().then((items: any[]) => { if (items !== null && items !== undefined) { resolve(items); } else { reject("Error") } });

returning 53 rows from the list. But when i want data to be rendered, it just not rendering anything? `

<li *ngFor=“let d of lstItems;let i=index;”> {{d.Title}}

`

lstItems has 53 row in array, console.log displays all data in array, ref pic

Here is my .ts file: `import { Component, Input, OnInit, ViewEncapsulation } from ‘@angular/core’; import {BaseService} from ‘…/services/app.services’;

@Component({ selector: ‘app-eika-pm-web-part’, templateUrl: ‘./eika-pm-web-part.component.html’, styleUrls: [‘./eika-pm-web-part.component.scss’], encapsulation: ViewEncapsulation.Emulated })

export class EikaPmWebPartComponent implements OnInit { @Input() description: string; lstItems: any[] = []; public test: string = “Dette er test data”; topics: string[] = [‘C’,‘C#’] constructor(private baseSrv:BaseService) { }

ngOnInit() { this._getlistData(); }

private _getlistData(){ this.baseSrv.getlistData().then((data: any)=>{ if(data!==null&&data!==undefined){ this.lstItems = data; } console.log(this.lstItems); }); } } `

[gonadn]

finally by digging litle more i found a better solution described in this article

Fix for this in Zone.js is not released yet, but we can use “elements-zone-strategy”, witch containes bug fixes…

install the package: npm i --save elements-zone-strategy

use the new strategy in “app.module.ts”: `import { ElementZoneStrategyFactory } from ‘elements-zone-strategy’;

const strategyFactory = new ElementZoneStrategyFactory(HelloComponent, this.injector); const helloElement = createCustomElement(HelloComponent, { injector: this.injector, strategyFactory }); customElements.define(‘my-hello’, helloElement);`

By adding this fix to my Angular Elements project it resolved issues with *ngFor, static and dynamic data, and issues with routing, Forms

This is maybe not the long term fix, but will be fixed by next release from Zone.js i hope?!

[StfBauer]

It is a bug in Angular Elements. https://github.com/angular/angular/issues/23841

I found at least a solution for your list data one through modifying your code with the following steps.

To get it running you have to modify your code as follows:

1.) Add a reference to ChangeDetector

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

2.) Pass in an additional reference to your constructor

constructor(private baseSrv:BaseService,
    private cdRef: ChangeDetectorRef ) { }

3.) Call the change detector in your getlistData1

private getlistData1() {

  this.baseSrv.getlistData1().then((data: any) => {
    if (data !== null && data !== undefined) {
      console.log(data);

      this.lstItems1 = data;
    }
    // Add detectChanges()
    this.cdRef.detectChanges();

  });

}

After the modification of the code, I was able to render the list values in the web part.

If you experience any issue with Angular Elements you might find a faster solution through crossposting your issues on the Angular Elements Team.

If you experience any issue on the project provisioning your feedback is more than welcome on this issue list.

Thank you for your understanding.