angular2,Pipe管道初使用。

2022-05-04 22:42:09 字數 841 閱讀 4341

以前都知道angular2有管道這個東西,不過,由於沒有使用的必要,也就沒怎麼看。

今天,做頁面,接收點選查詢傳來的資料,然後,顯示出來。

我的做法是在本地新建乙個object物件result。然後,在資料傳過來的時候,賦值到result。

可問題出在,初始化顯示模板時,我使用了 

}

的資料繫結方式,但是,這種方式在 component 初始化的時候,報錯了。

說 result.property 屬性找不到。其實,想一想也明白,初始化html的時候,

result是undefined,所以找不到。

我想了其中一種方法,就是在 result 初始化的時候,用這種形式

result =

但是,屬性差不多有40多個,我豈不是得寫40多次!肯定不行。

後來,想到了angular2有管道這個東西,然後,看了下文件,覺得能用管道解決我這問題。

寫個管道判斷就行了!

import  from '@angular/core';

@pipe()

export class judgepropertypipe implements pipetransform

else

}}

管道含義,傳入乙個obj: object型別,傳入乙個pro: string型別,

如果obj為空,就返回 'null',

如果obj不為空,那麼就將屬性值返回。

最後,將 juedgepropertypipe 匯入到 module,

然後,module中的所有元件就都能使用了。

}

Angular8管道使用 Pipe

每個應用開始的時候差不多都是一些簡單任務 獲取資料 轉換它們,然後把它們顯示給使用者。獲取資料可能簡單到建立乙個區域性變數就行,也可能複雜到從 websocket 中獲取資料流。一旦取到資料,你就可以把它們原始值的 tostring 結果直接推入檢視中。但這種做法很少能具備良好的使用者體驗。比如,幾...

Angular2的管道Pipe的使用方法

管道pipe可以將資料作為輸入,然後按照規則將其轉換並輸出。在angular2中有許多內建的pipe,比如datepipe uppercasepipe和currencypipe等。在這裡我們主要介紹如何自定義pipe。1.管道定義 pipe的定義如下 所示 import from angular c...

如何自定義Angular2 管道

1.說明 管道用來轉換模板顯示的內容,應用程式中經常出現獲取資料,轉換資料,顯示資料的邏輯。管道就是用來在轉換資料階段起作用的。主要存在兩種型別的管道,pure pipe和impure pipe 2.pure pipe pure pipe,stateless,關注於純粹物件的變更,檢測到輸入值發生了...