각도 - 관찰 가능한 데이터가 준비되지 않았습니까?

Question

저는 Angular 4 앱을 쓰고 있습니다. 여기에는 2 개의 목록이 있습니다. 첫 번째 목록에서 요소를 클릭하면 결과는 새보기의 두 번째 목록 (외래 키를 통해)의 하위 집합이어야합니다. 내 서비스의 함수로 ID (외래 키)로 필터링합니다. 내 구성 요소에서 나는 단지 'undefined'를 받는다. 그 이유는 내 서비스에서 Observable을 사용하기 때문에 하위 집합 목록에 대한 새로운보기가 표시 될 때 데이터가 준비되지 않았기 때문입니다. 내 목표에 도달하기 위해 이것을 다른 방법으로 어떻게 할 수 있습니까? 는 A 매트 테이블 셀에 클릭 이벤트를 통해 내 서비스 메서드 호출

: 내 component.ts에

getItemsByID(id: number): Observable<Item[]> { 
    return this.http.get('/api/Item').map((response) => { 
     console.log(id); //shows correct item id 
     console.log(this.items.filter(iteration => item.item_id === id)); // shows correct array of subset list 
     return this.items.filter(item=> item.item_id === id); 
    }); 
    } 

방법 내 service.ts에서

방법을

getItem(): void { 
    const id = +this.route.snapshot.paramMap.get('id'); 
    this.itemService.getItemsByID(id) 
     .subscribe(response => this.items = response);  
    console.log(this.items); // shows 'undefined' 
} 

내 코드에서 보여줄 다른 항목이 있습니까?

전체 로그 :

undefined

4

Array [ {…}, {…}, {…}, {…} ]

고마워요!

Answer 1

HttpClient을 http으로 사용하고 있다고 가정합니다. 목록을 반환하면 response이고, 작성한대로 .json() is not a function이 반환됩니다.

서비스에서 this.items 속성을 삭제하면 더 좋습니다. 이 속성이 서비스 및 구성 요소 모두에 this.items으로 존재한다고 생각하십니까? this은 개별 객체를 가리 킵니다. 그리고 서비스가 이와 같은 국가를 유지할 필요가 없다면 최선일 것입니다.

getItemsByID(id: number): Observable<Item[]> { 
 
    return this.http.get<Item[]>('/api/Item').map((items) => { 
 
    console.log(id); //shows correct item id 
 
    const filtered = items.filter(item => item.item_id === id); 
 
    console.log(filtered); // shows correct array of subset list 
 
    return filtered; 
 
    }); 
 
}

그런 다음 서비스를 사용 :

getItem(): void { 
 
    const id = +this.route.snapshot.paramMap.get('id'); 
 
    this.itemService.getItemsByID(id) 
 
    .subscribe(items => { 
 
     this.items = items; 
 
     console.log(items); 
 
    ); 
 
    }); 
 
}

Answer 2

서비스 배열 변수 내에이 응답을 저장하는 이유가 무엇인지 모르겠지만 서비스에서 매핑 된 데이터 만 반환하면됩니다.

getItemsByID(id: number): Observable<Item[]> { 
    return this.http.get('/api/Item') 
     .map((response: Response) => { 
     // return json object from http response 
     let mapped = response.json(); 
     // given that mapped is an array of itens 
     return mapped.filter(item => item.item_id === id); 
    }); 
} 

또한 콘솔이 구독 방법 밖에 있습니다. 비동기식입니다. 응답이 끝날 때까지 기다려야합니다. 그들은 초기 값 (BehaviorSubject, .startsWith())가 또는 동기하지 않는 한

getItem(): void { 
    const id = +this.route.snapshot.paramMap.get('id'); 
    this.itemService.getItemsByID(id) 
     .subscribe((response) => { 
      this.items = response; 
      console.log(this.items); 
     }); 
} 

Answer 3

Observable 인은되지 않습니다 전화가 구독 직후 준비. Http 서비스는 비동기식이므로 소비자를 적응시켜야합니다. 시간이 지남에 따라 모든 관측 값이 비동기 인 것처럼 구조화하는 것이 좋습니다. getItem() 무효이며 당신을 감안할 때

, 하나의 옵션은 가입자에게 처리를 이동 :

getItem(): void { 
 
    const id = +this.route.snapshot.paramMap.get('id'); 
 
    return this.itemService.getItemsByID(id); 
 
}

Access properties: 
 
{{ (getItem() | async).someProperty }} 
 

 
Pass to inner components: 
 
<cmp [item]="item | async"></cmp>

: 각도의

getItem(): void { 
 
    const id = +this.route.snapshot.paramMap.get('id'); 
 
    this.itemService.getItemsByID(id) 
 
    .subscribe(response => { 
 
     this.items = response; 
 
     // process it here, for instance calling ChangeDetectorRef#markForChanges() 
 
     // to make Angular update the component view 
 
     // see https://stackoverflow.com/a/47463896/592792 
 
    }); 
 
}

또 다른, 정말 멋진 기능은 async 파이프를 사용하고 있습니다

이 경우 우리는 Observable을 전달하여 봅니다. async은 필요없는 곳으로 값을 전달하고 전달합니다. 또한 observable을 구성 요소 속성에 저장하여 한 번만 생성 및 구독 할 수도 있습니다.