Question

关于如何使用带有HttpClient的Observable实现CRUD方法的新方法，在少数可用的Angular 5 Typescript文档中苦苦挣扎，我提出了下一个代码，但仍然坚持从Web API显示数据：

这是我的模特：

export interface Value {
    id: number;
    name: string;
  }

我的服务：

export class ValueService {
  baseUrl = environment.apiUrl;

  constructor(private authHttp: HttpClient) {}

  getValues() {
    return this.authHttp
      .get<Value[]>(this.baseUrl + 'values', { observe: 'response'});
      // here my baseUrl is 'http://example.com/api/'
  }
}

我的组件：

@Component({
  selector: 'app-values',
  templateUrl: './values.component.html',
  styleUrls: ['./values.component.css']
})
export class ValuesComponent implements OnInit {

  values: Value[];

  constructor(private valueService: ValueService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.data.subscribe(data => {
      this.values = data['values'].result;
    });
  }
}

最后，我的模板：

<ul>
  <li>
    <div *ngFor="let value of values | async"> {{value.name}}</div>  
  </li>
</ul>

我的数据显示在浏览器控制台中，结果是HTTP 200，但不在我的页面上，我在网页上呈现它时缺少什么？

Answer 1

不确定为什么要调用activatedRoute，因为它不是指向ValueService的链接。你应该显式调用valueService来获取数据。

例如。在你的ngOnInit（）

中

this.valueService.getValues().subscribe(response=> {
   // get your data here
});

另请查看您的ValueService.getValues（）。这是一个适用于我们项目的简单实现。您可以稍后映射数组。

return this.http.get(url)
  .map((res: any) => res.json())
  .catch(error => Observable.throw(error.json()));

顺便说一句。不确定你的异步过滤器是什么。它做了什么？

Answer 2

我不建议您使用ActivateRoute做什么，我建议将其与您获取数据方法分开。

您的getValues（）方法将返回一个Observable，您将在组件中订阅该数据以将数据存储到values数组中。

您不应该使用|你在html ngFor循环中是异步的，除非你循环遍历一个Observable，但是在这种情况下你订阅了Observable并将数据存储到一个数组中。

服务：

import { Injectable } from '@angular/core';

@injectable()
export class ValueService {
  baseUrl = environment.apiUrl;

  constructor(private authHttp: HttpClient) {}

  getValues(): Observable<HttpResponse<Value[]>> {
    return this.authHttp
      .get<Value[]>(this.baseUrl + 'values', { observe: 'response'});    
  }
}

组件：

export class ValuesComponent implements OnInit {

  public values: Value[];

  constructor(private valueService: ValueService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.valueService
        .subscribe(
            data => this.values = data['values'].result; // console.log your data to make sure its returning the expected results
            err => console.log(err);
         );
  }
}

HTML：

   <ul>
      <li>
        <div *ngFor="let value of values"> {{value.name}}</div>  
      </li>
    </ul>

使用Observable和HttpClient的Angular 5 GET数据 - 从Web API获取数据

2 个答案: