2017-04-03 138 views
0

從ngrx商店中選擇一個對象時,我們沒有得到該類的實例,而是獲得了具有相同屬性的對象。這可以防止在對象上調用函數。從ngrx商店獲取模型實例選擇

我應該在subscibe函數內創建一個實例嗎?我只是想知道我沒有找到關於這個主題的任何內容,並且想知道什麼是最佳實踐。

class ItemModel { 
    name: string; 

    formatedName() { 
    return this.name.upperCass(); // always undefined 
    } 
} 

class AnyClass { 
    item: ItemModel; 

    construtor() { 
    this.store.select(state => state.item).subscribe(item => this.item = item); 
    } 

    func() { 
    this.item.formatedName(); 
    } 
} 

回答

2

關於你的代碼剪斷至少有一個問題: 您需要使用this的名稱。 。

formatedName() { 
    return >>this.<<name.toUpperCase(); // always undefined 
} 

(不知道這只是在你的SO或也在這裏剪斷就在你的代碼


但是:所以一般不建議有類實例在店有幾條經驗法則:

  1. 商店內容應該序列化的,沒有任何大的改動(=>只使用對象和基本類型)
  2. ngrx(和一般的rxjs)在很大程度上依賴於函數式編程模式,所以不建議將它混合到面向對象的範例中。

既然你沒有提供任何進一步的細節我必須假設你的具體情況有關格式化字符串(如爲大寫),我會建議你使用模板管爲:

<span>{{item | myFormatToUpperCasePipe}}</span> 

,我會去,甚至更進一步,利用async - 管以及:

class MyComponent { 
    item$ = this.store.select(state => state.item); 
} 

// template: 
<span>{{item$ | async | myFormatToUpperCasePipe}}</span> 

在你不需要在模板此信息的情況下,我的問題是:你爲什麼需要f ormat的東西不顯示在UI中? 但即使在這種情況下,我建議你保留功能模式並使用實用程序方法來轉換數據 - 甚至可能作爲rxjs流的一部分。

+0

謝謝。大寫函數只是一個簡單的例子。我有一個有很多價值的模型。有些是基於其他值計算的。我不想在組件內部使用這種邏輯,因爲它在多個組件中使用。我不想使用管道,因爲它不僅顯示在UI中,而且還發送到服務器。所以把它放到模型中並寫一個'get'函數似乎是正確的,並且在我使用商店之前工作得很好。 – MarcS82

+0

但我看到你的觀點,所以也許我會寫靜態函數來計算值。 – MarcS82

+1

如果你有很多計算字段,並需要計算的值在許多地方,也許你可以設置一個映射流'store.select(.. item).map(toFormattedItem).subscribe(...)' - >作爲一個有利的一面-effect:'toFormattedItem()'將非常容易編寫單元測試 – olsn