Angular2-如何从打字稿中获取变量到我的HTML dom

Question

过去我经常使用AngularJS，但是Angular2对我来说是一个全新的世界..而且我还没有完全理解它。

我有一个home.ts和home.html

在我的home.ts内部，我有这个：

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  userData:any;

  constructor(
    public navCtrl: NavController,
    private storage: Storage,
    private database: AngularFireDatabase) {
      this.storage.get('user').then((result) => {
        this.userData = result;
      });

  }

我为用户提供了一个localstorage变量，并将其分配给userData ..

在我的.html文件中，我有一个跨度，我想用userData变量中的信息填充...我认为这样做很容易：

<span id="userName">{{userData.firstName}}</span>

但我只是一堆错误而Cannot read property 'firstName' of undefined ...

如何将userData变量放入HTML？ 谢谢！

Answer 1

您必须等到this.storage.get（'user'）解析后，再执行userData，然后才能定义userData.firstName，这会产生错误：无法读取未定义的属性“ firstName”。 。

你可以做

<span *ngIf="userData" id="userName">{{userData.firstName}}</span>

因此，您等待着解决砂子的诺言，然后在屏幕上显示该值。

Answer 2

在这种情况下，我通常要做的是在绑定中使用elvis运算符。 对您来说应该是：

<span id="userName">{{userData?.firstName}}</span>

问题是Angular试图渲染值，但是由于此步骤是在您的异步请求仍在解析时发生的，因此它尝试访问未定义属性上的名字属性-因此会引发您看到的异常。

您可以做的另一件事（不太受欢迎的imo）是将初始值设置为userData。 例如：

userData: any = {};