角度 - 観測可能なデータが準備できていませんか？

Question

私はAngular 4アプリを書いています。これには2つのリストが含まれます。最初のリストの要素をクリックすると、結果は新しいビューの2番目のリスト（外部キーを使用）のサブセットになります。私は私のサービス内の関数でid（外部キー）によるフィルタリングを行います。私のコンポーネントでは、私はちょうど 'undefined'を受け取る。 私は、私のサービスでObservableを使用しており、サブセットリストの新しいビューが表示されているときにデータが準備できていないと考えています。私の目標を達成するためにこれを別の方法でどうやって行うことができますか？

マット・テーブルのセルでクリックイベントを経て、私のサービスでメソッドを呼び出す：私のcomponent.ts

の私 service.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); 
    }); 
    } 

方法で

方法

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); 
    }); 
} 

また、お使いのコンソールは購読方法外です。非同期で、応答が終了するまで待つ必要があります。

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

観測、彼らは初期値（BehaviorSubject、.startsWith()）を持っているか、同期している場合を除き、ちょうど購読するコールの後準備ではありません。 Httpサービスは非同期なので、コンシューマーを適応させる必要があります。時間がたつにつれて、すべてのオブザーバブルが非同期であるかのように構造化するほうがよいことがわかります。 getItem()がvoidのあなたの考える

、一つの選択肢は、加入者に処理を移動している：

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をコンポーネントプロパティに格納して、一度だけ作成して登録することもできます。