Angular 4/WebRTC - ngIf only showing after switchting tabs/screen

Question

I'm currently working with Angular4 and WebRTC to scan a QR code to get package details from our API, when I get a response, a *ngIf will put the details in a table.

    <div *ngIf="package">
    <h3>Package details {{package.tracktrace}}</h3>
    <table class="responsive-table" id="status">
        <thead>
            <tr>
                <th>ID</th>
                <th>Status</th>
                <th>Date added</th>
                <th>Receiver</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{package.id}}</td>
                <td>{{package.last_status.status}}</td>
                <td>{{package.date_created}}</td>
                <td>{{package.recipient.fullname}}</td>
            </tr>
        </tbody>
    </table>
</div>

The problem is, the table will only show after switching tabs or screens on my laptop.

Here is my TS code:

    scanner.addListener('scan', (getDetails) => { // Scan gets track and trace number from QR code.
  this.tracktrace = getDetails;

  this.sub = this.route.params.subscribe(params => { // Asks for details by giving track and trace code.
    this.backend.getPackageByTrackTrace(this.tracktrace).subscribe(d => {
      this.package = (d as any).package;
      console.log('Success:', this.package);
    }, e => {
        console.log('Error:', e);
      });
  });
});

Yes! I also tried multiple browsers, safari, chrome, firefox etc. — Roy Sijnesael, Aug 23 '17 at 09:01
Did you try to tell the browser to rerender? https://stackoverflow.com/questions/35105374/how-to-force-a-components-re-rendering-in-angular-2 — Christian, Aug 23 '17 at 09:05

score 1 · Accepted Answer · answered Aug 23 '17 at 10:03

1

You could manually rerender the component by using one of the possibilities shown in this answer: How to force a components rerendering in angular2

answered Aug 23 '17 at 10:03

Christian

22,585
9
80
106

Angular 4/WebRTC - ngIf only showing after switchting tabs/screen

1 Answers1