배열의 모든 콘텐츠에 대한 파이프를 JSON 형식으로 찾아 필터링합니다. Angular 2

저녁 기도

검색 표시 줄이 있고 생성하려는 파이프를 사용하여받은 json 또는 객체 배열의 모든 문자열 또는 열에서 검색 할 수 있기를 원합니다. 따라서 내 테이블에서이 결과를 업데이트 할 수 있습니다.

지금까지 사용자 지정 파이프에 대해 가지고있는 것 : (내가하려는 작업을 수행하지 않음)

transform(items: any[], args:string): any {
    let keys = [];
    for (let key in items) {
            keys.push({key: key, value: items[key]});
    }
    let ans = [];
    for (let k in keys){
        if(items[k].value.match('^.*' + args +'.*$')){
            ans.push({key: k, value: items[k]});
        }
    }
    return ans;  }   

HTML 검색 <input type="text" #filterInput (keyup)="0">

파이프 호출 테이블에로드

<tbody *ngIf="usersBool">
<tr *ngFor="let entry of content | filterArrayOfObjects: filterInput" >
    <td>{{entry.value.enrollmentId}}</td>
    <td>{{entry.value.firstName}}</td>
    <td>{{entry.value.LastName}}</td>
    <td>{{entry.value.typeOfUser}}</td>
    <td>edit</td>
    <td>delete</td>

</tr>
</tbody>

다음과 같은 더미 콘텐츠가 있습니다.

this.content = [
               {
                   "enrollmentId": "A0xxxxxx",
                   "firstName": "Bob",
                   "LastName": "Bob",
                   "typeOfUser": 'Admin'
               },
               {
                   "enrollmentId": "A0xxxxxx",
                   "firstName": "Bob",
                   "LastName": "Bob",
                   "typeOfUser": 'Admin'
               },
               {
                   "enrollmentId": "A0xxxxxx",
                   "firstName": "Bob",
                   "LastName": "Bob",
                   "typeOfUser": 'Admin'
               }
           ];
저녁 기도

그래서 저는 콘텐츠 사전에있는 각 키를 고려하여 검색 창에 입력 한 내용과 일치하는 콘텐츠가 있는지 분석해야했습니다.

transform(items: any[], args:string): any {

    let ans = [];
    for (let k in items){
        if(items[k].enrollmentId.match('^.*' + args +'.*$')
           || items[k].firstName.match('^.*' + args +'.*$')
           || items[k].lastName.match('^.*' + args +'.*$')
           || items[k].typeOfUser.match('^.*' + args +'.*$')) {
            ans.push({key: k, value: items[k]});
        }
    }
    return ans;

}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

한 줄에 두 개의 인라인 div가 있지만 반응 형으로 확장하고 다른 모든 콘텐츠를 아래로 밀어내는 방법

분류에서Dev

콘텐츠가 angular2에서 라우터 아웃렛의 형제로 채워지는 이유

분류에서Dev

nginx는 모든 Angular 파일 (스크립트 포함)에 대한 index.html 콘텐츠를 반환합니다.

분류에서Dev

선택 요소를 json 데이터로 채우고 json의 필터링 된 콘텐츠를 반환합니다.

분류에서Dev

다양한 아카이브 형식의 모든 아카이브 파일을 반복적으로 찾아 파일 이름 패턴을 검색합니다.

분류에서Dev

다양한 아카이브 형식의 모든 아카이브 파일을 반복적으로 찾아 파일 이름 패턴을 검색합니다.

분류에서Dev

구조화 된 데이터 형식 (XML, JSON) 내의 콘텐츠를 대상으로하는 표준 표기법?

분류에서Dev

TextBox의 모든 콘텐츠 선택이 WPF에서 예상대로 작동하지 않습니다.

분류에서Dev

동일한 열에서 가장 긴 콘텐츠가있는 <td> 대신 모든 <td> 너비를 콘텐츠에 맞 춥니 다.

분류에서Dev

한 폴더의 콘텐츠를 제외한 모든 콘텐츠에 대한 액세스 거부

분류에서Dev

친숙한 URL을 동적으로 생성하고 Asp.Net C #에서 클릭 된 모든 게시물에 대해 고유 한 페이지에서 SQL db의 콘텐츠를 렌더링합니다.

분류에서Dev

거의 모든 것이 배열로 저장되는 형식으로 Json 데이터에서 정보를 검색하려면 어떻게해야합니까?

분류에서Dev

JavaScript / jQuery는 HTML 콘텐츠의 모든 링크를 조작 한 다음 대체합니다.

분류에서Dev

MySQL의 다양한 콘텐츠 유형에 대한 댓글 및 좋아요

분류에서Dev

Dictionary <T1, T2>의 모든 콘텐츠를 다른 Dictionary <T1, T2>에 추가하는 가장 간단한 방법 (키 및 값에 대해 동일한 유형)?

분류에서Dev

Alfresco 5.0의 폴더 아래에있는 모든 콘텐츠 파일 이름을 재귀 적으로 가져옵니다 (WebScripts 사용)

분류에서Dev

여러 JSON 파일을 Powershell 개체의 배열로 읽고 속성에 대해 동일한 값을 가진 파일을 필터링합니다.

분류에서Dev

Javascript는 필요한 모든 데이터를 얻기 위해 2 개의 배열을 세 번째 배열로 병합합니다.

분류에서Dev

JSON 파일의 모든 프로세스에 대한 PM2 공통 설정

분류에서Dev

2 차원 배열의 모든 열에 대한 최대 값을 찾는 데 문제가 있습니다.

분류에서Dev

request.post에 대해 콘텐츠 유형 헤더를 json으로 설정합니다.

분류에서Dev

CSS :: after-모든 브라우저에서 동일한 스타일로 된 콘텐츠 속성 표시 유니 코드 아이콘 (2192)

분류에서Dev

Android에서 상대 레이아웃의 모든 콘텐츠를 클릭 할 수있게 만드는 방법

분류에서Dev

Confluence 매크로에서 페이지의 모든 자식 콘텐츠를 렌더링하는 방법

분류에서Dev

다른 콘텐츠 맵에 대한 모든 맵 키 가져 오기 [문자열]

분류에서Dev

페이지 하단의 클릭 가능한 링크로 모든 URL을 찾아서 나열합니다.

분류에서Dev

javax.ws.rs.ProcessingException : 콘텐츠 유형 애플리케이션 / json에 대한 작성기를 찾을 수 없습니다.

분류에서Dev

MongoDB 쿼리는 배열에서 모든 콘텐츠를 검색합니까?

분류에서Dev

navbar의 모든 콘텐츠를 한 줄에 중앙에 배치하는 방법

Related 관련 기사

  1. 1

    한 줄에 두 개의 인라인 div가 있지만 반응 형으로 확장하고 다른 모든 콘텐츠를 아래로 밀어내는 방법

  2. 2

    콘텐츠가 angular2에서 라우터 아웃렛의 형제로 채워지는 이유

  3. 3

    nginx는 모든 Angular 파일 (스크립트 포함)에 대한 index.html 콘텐츠를 반환합니다.

  4. 4

    선택 요소를 json 데이터로 채우고 json의 필터링 된 콘텐츠를 반환합니다.

  5. 5

    다양한 아카이브 형식의 모든 아카이브 파일을 반복적으로 찾아 파일 이름 패턴을 검색합니다.

  6. 6

    다양한 아카이브 형식의 모든 아카이브 파일을 반복적으로 찾아 파일 이름 패턴을 검색합니다.

  7. 7

    구조화 된 데이터 형식 (XML, JSON) 내의 콘텐츠를 대상으로하는 표준 표기법?

  8. 8

    TextBox의 모든 콘텐츠 선택이 WPF에서 예상대로 작동하지 않습니다.

  9. 9

    동일한 열에서 가장 긴 콘텐츠가있는 <td> 대신 모든 <td> 너비를 콘텐츠에 맞 춥니 다.

  10. 10

    한 폴더의 콘텐츠를 제외한 모든 콘텐츠에 대한 액세스 거부

  11. 11

    친숙한 URL을 동적으로 생성하고 Asp.Net C #에서 클릭 된 모든 게시물에 대해 고유 한 페이지에서 SQL db의 콘텐츠를 렌더링합니다.

  12. 12

    거의 모든 것이 배열로 저장되는 형식으로 Json 데이터에서 정보를 검색하려면 어떻게해야합니까?

  13. 13

    JavaScript / jQuery는 HTML 콘텐츠의 모든 링크를 조작 한 다음 대체합니다.

  14. 14

    MySQL의 다양한 콘텐츠 유형에 대한 댓글 및 좋아요

  15. 15

    Dictionary <T1, T2>의 모든 콘텐츠를 다른 Dictionary <T1, T2>에 추가하는 가장 간단한 방법 (키 및 값에 대해 동일한 유형)?

  16. 16

    Alfresco 5.0의 폴더 아래에있는 모든 콘텐츠 파일 이름을 재귀 적으로 가져옵니다 (WebScripts 사용)

  17. 17

    여러 JSON 파일을 Powershell 개체의 배열로 읽고 속성에 대해 동일한 값을 가진 파일을 필터링합니다.

  18. 18

    Javascript는 필요한 모든 데이터를 얻기 위해 2 개의 배열을 세 번째 배열로 병합합니다.

  19. 19

    JSON 파일의 모든 프로세스에 대한 PM2 공통 설정

  20. 20

    2 차원 배열의 모든 열에 대한 최대 값을 찾는 데 문제가 있습니다.

  21. 21

    request.post에 대해 콘텐츠 유형 헤더를 json으로 설정합니다.

  22. 22

    CSS :: after-모든 브라우저에서 동일한 스타일로 된 콘텐츠 속성 표시 유니 코드 아이콘 (2192)

  23. 23

    Android에서 상대 레이아웃의 모든 콘텐츠를 클릭 할 수있게 만드는 방법

  24. 24

    Confluence 매크로에서 페이지의 모든 자식 콘텐츠를 렌더링하는 방법

  25. 25

    다른 콘텐츠 맵에 대한 모든 맵 키 가져 오기 [문자열]

  26. 26

    페이지 하단의 클릭 가능한 링크로 모든 URL을 찾아서 나열합니다.

  27. 27

    javax.ws.rs.ProcessingException : 콘텐츠 유형 애플리케이션 / json에 대한 작성기를 찾을 수 없습니다.

  28. 28

    MongoDB 쿼리는 배열에서 모든 콘텐츠를 검색합니까?

  29. 29

    navbar의 모든 콘텐츠를 한 줄에 중앙에 배치하는 방법

뜨겁다태그

보관