javascript - Angular2 - 如何从 typescript 获取变量到我的 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>

但我收到了吨的错误无法读取未定义的属性“firstName”...

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

Answer 1

您必须等到 this.storage.get('user') 解决，然后再执行 userData 未定义并且您正在尝试执行 userData.firstName，这给出了错误 Cannot read property 'firstName'未定义的..

你可以做到

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

因此，您等待解决沙子的 promise ，然后在屏幕上显示该值。