http.postレスポンスjsonからデータを変換してアプリケーションで使用するにはどうすればよいですか？

Question

私はかなりWeb開発とAngularの新機能を持っているので、明らかに何かが分からないと確信していますが、これを理解することはできません。

ここに関連するコードです：

@Component({ 
    selector: 'app-search-permits', 

    templateUrl: 'search.permits.html', 
}) 
export class SearchPermitsComponent { 
    apiRoot: String = 'http://localhost:8080/pzapp-servlet'; 

    constructor(public http: Http) {} 

    test() { 
    console.log('GET'); 
    const url = `${this.apiRoot}/controlleretax?message=getMstx`; 
    this.http.post(url, 'getMstx').subscribe(res => console.log(res.json())); 
    } 
} 

は、これは私のブラウザコンソールに素敵なJSONを出力します。 jsonのデータをオブジェクト（おそらくArrayList？）に割り当てたいので、htmlの表にデータを表示できます。

重要な場合は、角度材2の表を使用しています。

私が言ったように、私はこれを初めて知っているので、特定のコードスニペットを追加したり、コードスニペットを追加しても本当に感謝します。ここで

おかげ

Answer 1

は私の方法がどのように見えるし、その通常のサービスに何である：

サービス

getMovies(): Observable<IMovie[]> { 
    return this.http.get<IMovie[]>(this.moviesUrl) 
        .pipe(
         tap(data => console.log(JSON.stringify(data))), 
         catchError(this.handleError) 
        ); 
} 

観測を返すように注意してくださいメソッドの戻り値の型とreturn声明メソッドから。ザ・購読

コンポーネント

は、このようなコンポーネントで、その後です：

getMovies(): void { 
    this.movieService.getMovies() 
     .subscribe(
      (movies: IMovie[]) => this.movies = movies, 
      (error: any) => this.errorMessage = <any>error); 
} 

また

あなたはこのようなものを台無しにしたくない場合は...宣言して変数を割り当てる必要があります：

permits: Permits[]; 

    test() { 
    console.log('GET'); 
    const url = `${this.apiRoot}/controlleretax?message=getMstx`; 
    this.http.post(url, 'getMstx').subscribe(res => { 
     console.log(res.json()); 
     this.permits = res; 
    }); 
    } 

Answer 2

ハッピーウェブ開発中！

まず、HTTP機能をサービスに移行します。これは、（現在行っているように）1つのコンポーネントに密​​接に結合されているのとは異なり、さまざまなモジュールがサービスのさまざまな機能を消費するため、ベストプラクティスです。サービスの詳細についてはAngular docsをご覧ください。 HTMLで、あなたは、単にこのような.subscribe機能を介してデータを割り当てることができます/としてプリントアウトするオブジェクトにデータを割り当てるという点で

：

.subscribe((data: IRecipe[]) => this.recipes = data); 

this.recipesは、としてあなたのコンポーネントに設定されます。あなたのサブスクリプションから（HTTP応答に）dataを設定するために使用できる変数です。

これに続いてAngularディレクティブngFor*を使用して、データに類似の構造を持つ複数のjsonオブジェクトが含まれている場合は、レスポンスデータを繰り返してHTMLに出力します。以下の例では見ることができます。

<div class="cell small-12 medium-3" *ngFor="let recipe of recipes"> 
    <ul class="recipe-list"> 
    <li class="recipe"> 
     <h2 class="recipe-title">{{ recipe.name }}</h2>  
     <img class="recipe-image" src="{{ recipe.image }}"> 
     <div class="recipe-details"> 
      <p>{{ recipe.cookingTime }}</p> 
      <p>{{ recipe.mainIngredients }}</p>  
     </div> 
    </li>  
    </ul> 
</div> 

あなただけの単純なオブジェクト上のデータを印刷したい場合、あなたはおそらくすでにちょうどあなたのHTMLにデータをプリントアウトする<any element you want>{{ yourComponentVariableName }}</any element you want>を使用し、これを知っています。

Iで接頭辞を付ける理由は、Angularでインターフェイスの名前を付けるための規則なので、IRecipe[]が存在します（疑問がある場合）。下記に示すように、このインタフェースは、データのモデルを定義することができますインターフェイスで

export interface IRecipe { 
    name: String, 
    cookingTime: String, 
    mainIngredients: Array<String>, 
    ingredients: Array<Object>, 
    image: String 
} 

詳しい情報はTypeScript's official documentationに見つけることができます。

すべて最高です。