Updating the view manually results in tags using *ngIf being rendered twice

Ionic Framework
1

I have to incorporate an older library called DataWedge into an existing Ionic 4 project. It requires the use of Events, which I know is a recently deprecated interface in Ionic, but is still part of the version I’ve built this solution off of.

When the event occurs, it is triggered by a component nested within the view, but the event must update the entire view. This event happens outside of a typical angular “zone” so I’ve had to resort to a little cheat:

initScanListener(){ 

    this.events.subscribe('data:scan', scanData => { 
      let data = scanData.extras["com.symbol.datawedge.data_string"]
      this.onScanForm.controls.contNum.setValue(data.trim().replace(/\W/g, '').replace(/[^\d.-]/g, ''))
      data ? 
        this.submitRequest(false) : 
        this.presentToast('Data Scan Error', 'dagner')

      // Ugh, this is gross: setTimeout exploits a bug because 
      // ApplicationRef.tick() always returns an error. This re-renders the entire view:
      setTimeout(()=>{},0)
    })

  }

Right there at the bottom is a setTimeout() function that I use to re-render the page.

The problem is this: when I manually re-render the page, several elements in my view’s markup that use *ngIf render twice! This only happens on my android device, not in the browser.

Anyone know how this could happen?

2

I can think of two ways to parse this, and it’s probably important to know which you mean:

A. Duplicated elements appear
B. Element is rendered once, flickers, same element rendered again

1 Like
3

Duplicated elements appear.

4

In that case, I personally can’t think of anything else to ask or suggest without seeing an MCVE, but maybe somebody else can.