Question

我对网络开发和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中的表中显示数据。

如果重要的话我正在使用Angular Material2表。

就像我说的，我是新手，所以如果你可以具体甚至在你的回复中添加一个代码片段，我真的很感激。

由于

Answer 1

以下是我的方法在服务中的正常情况：

<强>服务

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

注意方法返回类型和return语句，以从方法返回Observable。

<强>组件

然后订阅在这样的组件中：

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功能转移到服务中。这是最佳实践，因为不同的模块可以使用服务的不同功能，而不是紧密耦合到一个组件（正如您当前所做的那样）。有关服务的更多信息，请参见Angular docs。

在将数据分配给要在HTML中打印的对象方面，您只需通过.subscribe函数分配数据，如下所示：

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

this.recipes将在您的组件中设置为变量，您可以使用它从订阅中设置data（到HTTP响应）。

在此之后，如果您的数据包含几个具有类似结构的json对象，请使用Angular指令ngFor*迭代响应数据并将其打印到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>

如果您只想打印一个简单对象上的数据，您可能已经知道这一点，只需使用<any element you want>{{ yourComponentVariableName }}</any element you want>将数据打印到HTML中。

IRecipe[]存在的原因（如果您想知道的话）是因为前缀接口I是Angular中命名接口的约定。该界面可以定义数据模型，如下所示：

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

有关接口的更多信息，请访问TypeScript's official documentation。

一切顺利。

如何从http.post响应json转换数据，以便我可以在我的应用程序中使用它？

2 个答案: