Javascript Angular2-如何从typescript获取变量到我的html dom

过去我经常使用AngularJS，但Angular2对我来说是一个全新的世界。。我还没有完全记下来

我有一个home.ts和一个home.html

在我家里。我有这个：

@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文件中，我有一个span，我想用userData变量中的信息填充它。。。我认为这和做这件事一样简单：

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

但我只是得到了大量的错误，无法读取未定义的属性“firstName”

---

如何将userData变量放入html中？谢谢

您必须等到this.storage.get'user'解析后，才能执行then，因为userData未定义，并且您正在尝试执行userData.firstName，该错误导致无法读取undefined的属性'firstName'

你能行

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

---

因此，您需要等待承诺解析，然后在屏幕上显示该值。

您必须等到this.storage.get'user'被解析，然后才能执行then。用户数据未定义，并且您正在尝试执行userData.firstName，该错误导致无法读取未定义的属性'firstName'

你能行

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

---

因此，您需要等待您的承诺来解析sand，然后在屏幕上显示该值。

在这种情况下，我通常会在绑定中使用elvis操作符。这对您来说是什么样的：

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

---

在这种情况下，我通常会在绑定中使用elvis操作符。这对您来说是什么样的：

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

---

您确定用户数据未定义吗？意味着用户数据从本地存储中转移数据？我建议转移存储。转到ngOnInt生命周期挂钩。这将允许每次在屏幕上显示此组件时重新获取本地存储数据，而不是在应用程序启动时仅显示一次。您确定用户数据未定义吗？意味着用户数据从本地存储中转移数据？我建议转移存储。转到ngOnInt生命周期挂钩。这将允许每次在屏幕上显示此组件时重新获取本地存储数据，而不是在应用程序启动时仅显示一次。谢谢，这也起到了作用，我回答了另一个问题，但这可能会更干净。。非常感谢。没问题！我更喜欢那个？。语法，因为它对C语言的开发人员更为熟悉/可翻译。在具有多个属性的显示窗体上，实现此语法比在10+个元素上使用*ngIf指令要容易得多。它也不需要像spanThank这样的包装元素，这也很有效，我回答了另一个问题，但这可能更干净。。非常感谢。没问题！我更喜欢那个？。语法，因为它对习惯于C的开发人员更为熟悉/可翻译。在具有多个属性的显示窗体上，实现此语法比在10+个元素上使用*ngIf指令要容易得多。它也不需要像span这样的包装元素