不显示数据的二维码

Question

我已经将angular2-qrcode库添加到我的ionic v2项目中。它被分成html部分(与模板分离)和ts部分。当将静态数据加载到模板时，它将正常工作，并显示带有静态字符串的二维码。但是当我用data = fooVar标记动态绑定数据时，它创建了一个没有数据的二维码(读出一个空字符串)。我还尝试用data = {{ fooVar }}方法绑定它。

html代码：

<div>
    <qr-code [data]="qrdata" [size]="150"></qr-code>
</div>

变体2：

<div>
    <qr-code data="{{ qrdata }}" [size]="150"></qr-code>
</div>

ts代码：

  this.qrdata = this.sanitizeHTML("www.a-link-to-my-page.at");

在这里我要清理受信任的超文本标记语言，我也尝试过网址和ResourceURL，但没有成功。

我在控制台中发现的唯一错误是：

Could not generate QR Code: Cannot read property 'length' of undefined

我的第一个想法是为了计时问题，但我在类的构造函数中生成qrdata，因此它在页面呈现之前执行。还是我错了？

Answer 1

在使用二维码标签之前，请使用ngIf并检查是否定义了QRCode值。