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 = {};