Angular 4/WebRTC - ngIf 仅在切换后显示 tabs/screen

Question

我目前正在使用 Angular4 和 WebRTC 扫描二维码以获取来自我们 API 的包裹详细信息，当我收到响应时，*ngIf 会将详细信息放入 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>

问题是，table 只会在我的笔记本电脑上切换标签页或屏幕后显示。

这是我的 TS 代码：

    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);
      });
  });
});

Answer 1

您可以使用此答案中显示的一种可能性手动重新渲染组件：

Angular 4/WebRTC - ngIf 仅在切换后显示 tabs/screen

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

qr-code

webrtc

typescript

angular